CSR, SSR or PSSR?

CSR, SSR or PSSR?

Client Side Rendering (CSR)

With a client-side rendering solution, you redirect the request to a single HTML file and the server will deliver it without any content (or with a loading screen) until you fetch all the JavaScript and let the browser compile everything before rendering the content.

Page load behaviour in Client Side Rendering :-

1. Browser makes a request to the server for HTML Server sends back the HTML with script tags in head and no content in body

2. Browser parses the HTML and makes http requests to load the scripts. Once the scripts are loaded, the browser parses them and makes API requests and loads all the content asynchronously.

Under a good and reliable internet connection, it’s pretty fast and works well. But what happens when we are on a high latency and low bandwidth network?

Some Pros of CSR are :-

1. Fast website rendering after the initial javascript load, the content can be loaded asynchronously. The **critical content **can be loaded first and then non-critical content later.

2. Good for web applications. Server serves static HTML and initial load JavaScript bundles can be cached in the browsers which may benefit frequent users. Also provides a robust selection of JavaScript libraries.

Some Cons of CSR are :-

1. Initial load takes longer time because JavaScript blocks content load. The larger your bundle size is, the longer it will take to show content on the page.

2. API requests are not co-located with the browser location. This may take even longer in slower networks due to high latency and low bandwidth.

3. Low SEO if not implemented correctly, SEO scores take a huge hit since search engines don’t execute JavaScript and only an empty page is indexed.

Server Side Rendering (SSR)

Server rendering generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response.

Server-side sends a fully rendered page to the client; the client’s JavaScript bundle takes over and allows the SPA framework to operate.

Page load behaviour in Server Side Rendering :-

1. Browser makes a request to the server for HTML. Server makes API requests (usually co-located) and renders the content in the server.

2. Once the page is ready, the server sends it to the browser. The browser loads and parses the HTML and paints the content on the screen without waiting for the JavaScript bundle(s) to load.

3. Once the JavaScript bundle(s) are loaded, the browser hydrates interactivity to DOM elements, which is usually attaching event handlers and other interactive behaviours.

Now Imagine that a user clicks a link on a page, the browser sends a request to the server and the entire process is carried out by the server again. This process not only increases the load on the server but also consumes unnecessary internet bandwidth.

Some Pros of SSR are :-

1. It enables pages to load faster which provides a better user experience. Since the server serves HTML with content, neither the browser nor search engines have to depend on JavaScript for the content.

2. It plays an important role in SEO and correctly indexes webpages. (Google favours web pages with faster load time.)

3. It provides body to the HTML pages for all server ships and Content is not blocked by the time taken to load JavaScript bundle(s).

4. Page loads a lot faster than CSR.

Some Cons of SSR are :-

1. Rendering a big application on the server-side can be very time consuming and it may increase the loading time due to it being a single bottleneck. The entire HTML has to be rendered on the server before sending it to the client, non-critical content has to be rendered on the server before sending the response HTML to the client.

Progressive Server Side Rendering (PSSR)

**Progressive Server Side Rendering **allows you to send HTML in chunks that the browser can progressively render as it’s received. This can provide a fast **First Paint **and First Contentful Paint as markup arrives to users faster. You render the critical content on the server, you start streaming it to the client without waiting for non-critical content. You then stream the non-critical content later once it’s rendered on the server.

Page load behaviour in Progressive SSR :-

1. The procedure is same as of SSR but it renders only the critical content first in the server and streams it to the browser.

2. It (browser) then receives chunk of HTML and renders it on the screen. Server renders non-critical content after rendering critical content and streams it to the client.

3. Once the entire page is loaded, the browser hydrates interactivity to DOM elements, which is usually attaching event handlers and other interactive behaviours.

Progressive rendering actually takes the benefits from both CSR and SSR, because the APIs are co-located in the server and at the same time, critical content can be rendered quickly without having to wait for non-critical content.

Some Pros of PSSR are :-

1. Very useful for slower networks. We can render on server but stream critical content to client without waiting for non-critical content.

2. Page loads faster than both CSR and SSR because Content is not blocked by the time taken to load JavaScript bundle(s).

Some Cons of PSSR are :-

1. The hydration of the DOM and attaching of event listeners takes place only after the whole page is rendered. Even though content shows up quickly, interactivity will be enabled only after non-critical content is loaded.

2. No framework as such for progressive rendering.

How to do progressive rendering?

Progressive rendering is possible by streaming HTML. In Node.Js you can use streams to build applications, read more about it here.

Node.Js has this Readable API which will let you pipe a readable stream.

Here’s a great link to learn about streams and implement them. An example code would look like :-

Attaching below is a website to compare the usage of progressive rendering and server side rendering.

We can also see the results from perf profiling. It shows a clear performance boost in content load up of the website.

That’s all folks!