A Deep dive into CSR, SSR, SSG and ISR

The evolution of the web has given rise to many innovative ways through which servers render and deliver web pages to the browser. some of which include server-side rendering(SSR), client-side rendering(CSR), server-side generation(SSG) and incremental Static regeneration/revalidation(SSR).while most of these techniques have brought immense improvement in website load/delivery speed, they also have their use cases, pros, and cons. In this article, we dive a little bit deeper, taking a behind-the-scenes look at how these techniques work and when to use them.

Client-side rendering (CSR)

With client-side rendering, when a request is made to the server, the server responds with a blank HTML file and a javascript bundle. the javascript now builds the Dom(HTML elements) from scratch based on some virtual Dom(React virtual Dom) in a case where the app is built with react. hence depending on the bundle size returned to the browser, the user usually will see a blank screen for some seconds before the website information is then displayed.

steps involved in client-side rendering

1. The user makes a request to the server

2. The server returns a blank HTML page

3. The browser fetches and downloads the JS bundle

4. JS constructs HTML UI and makes it interactive(attaches necessary event handlers)

5. Any request to 3rd party API's are made

6. Users can now fully interact with web page

when to use client-side rendering

Client-side rendering is best used in web applications with large complex features and pages.

pros

• Reduced server-side workload

• Reduced server cost

• A better client experience

cons

• Poor SEO, since the initial page sent to the browser, is empty, web crawlers can't index the content of the page

• Slow initial load due to the fact that the dom is being constructed on the client side.

Server-side rendering(SSR)

With Server side rendering, when a request is made to the server for a page, the server fetches relevant data for that page from the backend, constructs the full HTML page, and sends it back to the browser which will now become visible.

Note: even if javascript is disabled in our browser, we still see the full page, but can't interact with it.

Hence with server-side rendering, we construct the full HTML page on the server and return it to the browser.

when to use server-side rendering

SSR can be used on websites in which SEO is crucial. or in situations where each user has unique content shown on the initial load

pros

• Easy indexing by search engines

• Fast load times especially in case of a slow connection

cons

• High server load, since the server has to build the page on every request

• Slower transition between pages in the application

Server side generation(SSG)

This is also called Static site generation. with SSG, the server builds our website page together with its static assets once and serves it on a CDN(content delivery network). any subsequent request for a web page is served from the CDN.In SSG, pages are usually generated during application build time

when to use server-side generation

SSG can be used for websites whose content does change very often e.g blogs

pros

• High-performance thanks to CDN caching

• The static HTML page will always be served even if the backend is down

cons

• The content of the page served by the CDN can easily get outdated in case of rapidly changing content.

Incremental static regeneration(ISR)

This concept is mostly popular with Nextjs. ISR is very similar to SSG, they work basically the same, but ISR goes an extra step. After the static page is served on the CDN, and after some interval, the page on the CDN is then invalidated and a new version of the page is regenerated with fresh data. with this, we can use SSG with data that is frequently changing.

when to use incremental static regeneration

we can use ISR with websites where we want to get fresh updates delivered to the customer per page basis without having to redeploy the site and with the benefits of SSG.

pros

• Less server load

• content delivery is very fast

• rebuilding/deploying the website to display fresh content is not needed.

cons

• Might need extra configuring steps

These page rendering techniques are used in different situations and have several pros and cons. most modern applications will often make use of more than one e.g SSG + CSR or ISR + CSR.combining these techniques provide an amazing way of getting the best of both worlds, be it website performance or SEO.