Exploring the Differences between SSR, SSG, CSR and ISR. Which is the Best Approach? (with diagrams)
Tags: javascript, beginners, react, nextjs
Published: 2023-05-26 13:40:42

Next.js is a full-stack React framework for the web that enables you to create production-grade React applications that scale.

When we use Next.js in our project, we have three options for fetching data, there are **SSG (Site Static Generation)**, **CSR (Client Server Render)**, **SSR(Server Side Render)**, and **ISR (Incremental Side Render)**. But, what do these words mean? So, in this post, I will explain with diagrams what? when? and Why?. Let's go.

I will start with the more popular and more useful: **SSR (Server Side Render)**.

## 1. Server Side Rendering (SSR)

**Server-Side Rendering (SSR)**: With SSR, when a user visits a web page, the browser sends a request to the server for that page. The server fetches the necessary data from the database, if needed, and sends it together with the page’s content to the browser. The browser then displays it to the user. This can reduce the website’s performance but is perfect for pages that consume dynamic data.

Below is a diagram of how this method works.

![how ssr works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s9zux089clj4y7kuxjs.jpg)

**Why SSR ?**

- Server side rendering is ideal for Search Engine Optimization as the data is available on the initial load itself;

- With SSR, the content is immediately available;

- As the API calls occur in the server side, no client fetches is required thereby reducing the waiting time.

_A best use case to use SSR could be an e-commerce application where we can pre render the data on the server side._


## 2. Static Site Generation (SSG)

**Static Site Generation**, is a method of rendering where static HTML files are generated at build time for each page of your site. This means that when a user visits your site, they are served pre-built HTML files, which can result in faster load times.

Below is a diagram of how this method works.

![how ssg works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ge30s4g7ohwr9dj70q9m.jpg)

**Why SSG ?**

- The content is immediately available;

- This is incredibly faster as the HTML is rendered at the build time;

- SSG is best suited for SEO;

- SSG is ideal for webpages that have static content. eg: Blogs, Portfolio.


## 3. Client-Side Rendering (CSR):

With CSR, the server passes little to no HTML except a small piece of boilerplate code. The page then requests any data it needs from the server after the page load event via AJAX requests. CSR apps are often quick to load on navigation but may be slow to load initially1.

Below is a diagram of how this method works.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql5pfplxzhjcbu2td7a5.jpg)

**Why not use this approach?**

- Javascript bundle size can get larger. On slower connections, downloading the code on the client side will take time which in turn increase the time for initial loading of the page;

- CSR is not best suited for Search Engine Optimization (SEO) indexing as content is a blank page on initial load.

_You can use this approach if SEO doesn't matter to you._


## 4. Incremental Static Regeneration (ISR):

Next.js allows you to create or update static pages after you’ve built your site. **ISR** is a rendering method that blends the speed and scalability of statically generated sites with the reactivity of SSR and CSR-style apps. It allows you to update static content incrementally after the initial build, without needing to rebuild the entire site.

_We can say that: SSG + update static content after the initial build = Incremental Static Regeneration._


## And Now?

I hope this explication can help you decide which approach to use to fetch data using Next.js.

For me, the SSR and ISR are my favorites approach for building pages and web apps.

But, remember, each rendering method has its own advantages and disadvantages, and the one you choose will depend on your specific needs and requirements.

I use [DiagramGPT](https://www.eraser.io/diagramgpt) for build the diagram.

You can read more about these subjects in the links of references.

**References:**

1. https://sruthicodes.hashnode.dev/rendering-methods-csr-vs-ssr-vs-ssg

2. https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration

3. https://hashnode.theodorusclarence.com/understanding-nextjs-data-fetching-csr-ssr-ssg-isr