A Deep dive into CSR, SSR, SSG and ISR
Tags: beginners, webdev, codenewbie, programming
Published: 2024-01-29 12:21:27

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)**, **static site 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 APIs are made
6. Users can now fully interact with the 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 since 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

### Static site generation(SSG)
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**.