What is the difference between server-side and client-side rendering?

2
votes

That question has a lot of articles around the web discussing it, but given how recent I am to web dev I think I am missing a few pieces to get the full picture.

My understanding is as follows:

Let us assume we have a Node.js server and we're using express for our web app. Client rendering is when I don't enter a URL in the web browser that creates an HTTP request to my server. Instead, the client requests comes from a JS script(that was loaded from the server initially when I accessed the application using the root route for example: http://localhost:SOME_PORT/). So, let's say my request is to fetch some information about a certain user from a database. Instead of going through the server, the JS script(using AJAX) for example does an XMLHTTPRequest directly to the database(say I trigger this by a button called Fetch) instead of going through my server and then the client(the browser) will get a response and in turn will create an HTML document and render it. As opposed to server-side rendering, where I for example enter a URL in the browser, and the server intercepts the request, and prepares the HTML document along with the data requested(if any) and sends it back in HTML form for the browser to render(hence server-side, no work was done on the client-side but actually displaying the page).

Is this accurate? What am I missing in my understanding of both and when to utilize either style?

1
reactjsclient-sideserver-sideweb-development-server
I don't think you're missing much; it's fair to reduce the whole thing to where the actual HTML code is generated - either on the server already, or the server just sends data and lets the client put it into HTML. As for when to use which - rather opinion-based, I'd say. But if you request a lot of records, that would mean using server-side rendering you would send a lot of repetitive HTML ... so in such a case just sending the pure data, and letting the client do the rendering might be preferable. - CBroe

1 Answers

3
votes

Let us assume we have a Node.js server and we're using express for our web app.

It doesn't really matter what software you use on the server, but we'll use that for the example.

Client rendering is when I don't enter a URL in the web browser that creates an HTTP request to my server. Instead, the client requests comes from a JS script (that was loaded from the server initially when I accessed the application using the root route for example: http://localhost:SOME_PORT/).

That would have loaded an HTML document which loaded the JS with a script element. You wouldn't load the script directly.

So, let's say my request is to fetch some information about a certain user from a database. Instead of going through the server, the JS script(using AJAX) for example does an XMLHTTPRequest directly to the database

No. You still make an HTTP request to the HTTP server.

(say I trigger this by a button called Fetch) instead of going through my server and then the client(the browser) will get a response and in turn will create an HTML document and render it.

Ish.

The client already has an HTML document. With client side rendering, the DOM generated from that document is modified (usually with new data requested from the server).

As opposed to server-side rendering, where I for example enter a URL in the browser

To keep the scenario as close to the Client-side rendering example as possible, let's say you click a link instead of entering a URL.

, and the server intercepts the request,

The request is explicitly made to the server, it isn't intercepted. That would imply it was intended for somewhere else.

and prepares the HTML document along with the data requested(if any) and sends it back in HTML form for the browser to render(hence server-side, no work was done on the client-side but actually displaying the page).

Basically.

The short version is:

With server side rendering, a complete HTML document is prepared on the server and delivered to the browser.

With client side rendering, the DOM is manipulated on the client to produce the same document.