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.
Top comments (0)