Client-side Rendering & Server-side Rendering

Arjad Gohar — Wed, 20 Nov 2024 13:56:26 +0000

Client-side rendering, also referred to as CSR, the browser renders the page itself with the use of JS. Instead of sending a ready-made page from the server, the server provides the JavaScript that will run in the browser and construct the content as the user interacts with the site. We have a lot of examples of client-side rendering websites, i.e facebook, and other social media, as they need continuous page load.

Process:

Server sends an initial HTML file.
Client-side download JS code from server.
The JS code outputs the final UI.

Pros:
- More dynamic and interactive web applications.
- It provides a smoother experience for users and every load.
- It reduces the extra need for server-side-requests.

Cons:
- It has slower initial load times.

Server-side rendering, also abbreviated as SSR, is when the server composes and sends to client-side a fully-formed HTML page which includes all dynamic content. The browser, then, simply displays the page without any need to do extra work. As a result, users view content at a faster speed since all processing happens on the server side. For example, as I have read somewhere that wordpress & github are based on server-side rendering (correct me, if I am wrong)

Process:

Server receives a request for the web page, retrieves the data required, populates into an HTML, and applies the necessary styles.
Now, the fully rendered page is sent by the server to the browser to show.
In the case of initial page loading, no type of JS is required.
Subsequent user interactions and updates are managed by the client-side JS rendering.

Pros:
- It loads faster the first time.
- Better user experience even with a slower network.

Cons:
- More server load requires.
- It will be slow when it is requested multiple times.

In a nutshell:

At last, I will add my own opinion to it, for applications that consider interactivity and user engagement as the top aspects, like social media or web applications with lots of client-side logic, CSR stands the best. However, where content is heavy, such as websites with more of an interest in SEO and fast initial load speeds, SSR will be a better option. It depends on the nature of the application and target audience to be determined.

Thus, by careful analysis of the strength and weakness, the developer can take a decision to have the right rendering strategy balancing performance, usability, and searchability.

Happy Coding. Thanks.

DEV Community: Arjad Gohar

Client-side Rendering & Server-side Rendering