Client Side Rendering VS Server Side Rendering

Since dawn of time the conventional method for getting html page up onto a screen was by using server-side rendering. It was the only way. You loaded up your .html pages on your server, then your server went and turned them into useful documents on your user’s browsers.

At that time server-side rendering worked great since most web-pages were mostly just for displaying static images and text .

Java Script Framework came in with a completely different approach to web development. Java script made the possibility to render dynamic content right from the browser by requesting just the content that was required. This transformation gave a fascinating user experience to visitors since there was a very little time taken for loading the web page.

In this article, we will discuss these technically different approaches on web page rendering.

What is server side rendering?

Server-side rendering or SSR is the traditional way of rendering webpages on the browser.  Where the traditional way of rendering dynamic web content follows the below steps:

1.   User sends a request to the webserver of requested website via webbrowser
2. .    The server begins to check the availability of resource and compiles and an prepares the html content after running server-side scripts lying within the page
3. This compiled HTML is sent to client’s browser for further rendering and display
4.    User’s browser downloads HTML,CSS,JS files and makes the site visible to the end-user
5.  The browser then downloads the Javascript(JS) and as it executes the JS, it makes the page interactive with JS animations

Client Side Rendering

Client-side rendering or CSR is a different approach to how the webpage is processed for display in the browser. In the CSR, the work of compiling dynamic content and generating HTML for them is transferred to client’s browser/

This approach is powered by JavaScript frameworks and libraries like ReactJS, VUEJS and Angular JS. The normal flow of webpage rendering for a client-side rendering scenario follow these steps:

1. .    The user sends a request to a website via a webbrowser(like google chrome)
2. .    Instead of a server, a CDN(content Delivery network) can be used to serve staticHTML, CSS and supporting files to the user.
3.   The browser downloads the HTML and then the JS, Meanwhile the user sees a loading symbol.
4. .    After the browser fetches the JS, It makes API request via AJAX to fetch the dynamic content and processes it to render the final content.
5.      After the server responds, the final content is rendered using DOM processing in the client’s browser

Since this process involves processing data on the client side that is why this process is called client-side rendering

Performance Metrics

Since both the approaches are different in the way that the content is processed, each method has its benefits.

Web Page Load Time

The web page load time is the time taken between the request is sent to the server and when it is rendered on the browser. This is an important aspect when it comes to user experience for your website. The webpage load times for SSR and CSR are different

First Page Load Time

The first page load time is the average time taken when the user loads your website for the first time. On the first load, in CSR, the browser loads base HTML, CSS, and all the scripts required at once and then compiles HTML to usable content on the browser.

This time usually is more than getting pre-compiled HTML and the corresponding scripts from the server. Thus SSR takes less time.

Second and Further Page Load Time

The second page load time is the average time taken to navigate from one page to another. In this Scenario, since all supporting scripts are loaded in advance for CSR, the load time is faster for CSR. It doesn’t send a request to the server unless a lazy JavaScript module needs to be loaded.

However, for SSR the complete request cycle followed in the first-page load is repeated. This means there is hardly any impact on webpage load time when it comes to SSR but CSR responds faster in this case.

It is important to note her that the above comparison doesn’t consider network metrics in depth, where we assumed that the client and server has comparable bandwidth on the network.

Bandwidth

Using CSR your initial load will be heavier: again, more JavaScript and a 2^nd request. However, subsequent updates will require less bandwidth. JSON is pretty verbose . but CSR still needs to spend time transforming JSON to HTML

Conclusion

On considering bandwidth, what you should use. CSR comes in 1^st place since you don’t need to go to server to render the data again.

But in terms of load on users cpu and caching SSR is better because all the load will be on the server that you are requesting your page in.

Further Reading:

[1]https://signalvnoise.com/posts/3112-how-basecamp-next-got-to-be-so-damn-fast-without-using-much-client-side-ui

[2] https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering

About Author
Hisham Elreedy is Digital Electronics Engineer, Graphics Designer, Blogger, Youtuber. Inspired to teach all he knows from his experience in studying undergraduate engineering by creating useful posts