🌐 All About Rendering 🌐
Server Side Rendering (SSR) and Client Side Rendering (CSR)
In web development, there are two main approaches to rendering web pages: server-side rendering (SSR) and client-side rendering (CSR) which rookies frequently overlook in their attempt to gain practical knowledge in the field of development. Through clear explanations, this article aims to strengthen your grasp of the topic.
But first let's take a closer look at rendering, before heading on server-side rendering (SSR) and client-side rendering (CSR).
What is Rendering?
Rendering is a process in which the web crawler(a computer program that automatically searches and indexes website content and other information on internet e.g. googlebot, bingbot) links the website code to build interactive webpages.
There are two states of every webpage:
Initial HTML
Rendered HTML
Initial HTML
The stage initial HTML occurs first. This is a response from a server in which, the HTML and resources are linked with the CSS, JavaScript, images etc. to build a webpage.
Rendered HTML
Rendered HTML is also called as DOM (Document Object Model). Every webpage has a DOM. The DOM contains the initial HTML and JavaScript changes which HTML called on.
Sever-Side Rendering (SSR)
In Server-Side Rendering the HTML for a webpage is generated on the server and then sent to the client (browser). The client than interprets the HTML and displays the page, giving user the fully rendered HTML page without waiting for the JavaScript or CSS files to load.
How Server-Side Rendering works?
The user open's the browser and request server to open the website.
The server than creates the HTML files which are required to display the website on the browser.
The server than renders the HTML files and then send it to the user. Here, the website gets displayed on the browser along with the CSS but the website is not interactive yet.
The browser downloads the rendered JavaScript of the webpages which is readily available on the server.
The browser fully executes the website as DOM is fully rendered.
The website is now fully loaded and interactive.
When Server-Side Rendering is used?
Server-Side Rendering gives upper-hand to the website which is mostly static and javascript is not at all used or it is minimal. The SSR approach loads the page faster than CSR thus various E-learning websites, online marketplace and web application having simple user interface with fewer pages, features and dynamic data are all benefited by this type of rendering.
Client-Side Rendering (CSR)
Client-Side Rendering is relatively new approach and it became popular when javascript libraries such as Angular, React etc. started interacting with it. It works by rendering website's JavaScript on your browser rather than your server. The server responds to a part of HTML files containing javascript rather than all the content in the HTML files. The website initial upload is bit slow but subsequent pages loads faster as they aren't reliant on the HTML pages per route.
How Client-Side Rendering works?
The user open's the browser and request server to open the website.
On the client's first request the server delivers the minimal HTML files along with CSS and JavaScript links.
The browser will download the HTML files first.
Then, CSS and JavaScript files are downloaded. The HTML files connect with the JavaScript and the start of loading process is displayed by loading symbols.
Then the browser executes the JavaScript framework or library.
The browser displays the website now which is fully interactive.
When Client-Side Rendering is used?
Client-Side Rendering is preferred where the websites are build using javascript extensively as well as where some components of the javascript are needed to load the pages of the website. The CSR approach loads the page slower than the SSR thus it is used in dynamic web application like social networks and online messengers. Which is needed because in this application the information constantly changes and we have to deal with large and dynamic data to perform fast updates to meet the user demand.
Which is better?
Not upon which type of rendering is used but where it is used this factor helps to determine, which rendering is better. The static websites with minimal user interaction should use SSR approach. The SSR approach is more effective in these websites as it loads the pages faster and influences accessibility, SEO and social media support positively.
On the other hand, CSR is excellent for providing the cost-effective rendering for web applications. In CSR approach, the website take more time to load but it is easier to build and maintain.
A third approach which is the hybrid approach can also be used while building a website or a webpage. For example: In online marketplaces, the product description content can be render on the server as it is easier for index searches. Whereas, Pages like user accounts don’t need to be ranked in the SERPs(Search Engine Result Page), so a CSR approach might be better for UX.