Exploring Web Rendering Strategies: A Deep Dive into CSR, SSR, SSG and ISG
Tags: webdev, nextjs, react, frontend
Published: 2024-05-27 16:11:48

## Introduction
Every day we interact with a lot of web applications. They all seem the same web applications to us but the way they are rendered on the screen is pretty different. It can be **SSR** or maybe **CSR** or **SSG** or **ISG** anything. In this blog, I will explain these **web rendering strategies** and how to choose one.

There are mainly 4 types of web rendering strategies:
1. Client-Side Rendering (CSR)
1. Server-Side Rendering (SSR)
1. Static Site Generation (SSG)
1. Incremental Static Generation (ISG)

let's deep dive into them one by one.

## Client-Side Rendering (CSR): 
In **Client-Side Rendering**, a request has been made to the server at first and then a minimal **HTML** file comes with the **JavaScript** files. Now with the help of **JavaScript**, the content of the website is loaded. Even the routing also handled by **JavaScript** and no **HTML** is fetched from the Server.
### Usage
This technique is ideal for apps which have **a lot of interactions**. But from an **SEO** perspective, this is not a great choice. Also, for the first time, it takes a little time as all the page data is loaded at once.
### Example
**React**, **Vue** and **Angular** use Client-Side Rendering.

## Server-Side Rendering (SSR):
In **Server-Side Rendering**, the server generates a full **HTML page** on the server in response to the user's **request** and then sends that to the client. 
### Usage
This technique is ideal when you need **faster initial loads and better SEO advantages**. But as for each request, the server generates the content dynamically, which leads to increased load and response times. 
### Example
**NextJS**, **NuxtJS**, and **Angular Universal** use Server-Side Rendering.

## Static Site Generation (SSG):
In **Static Site Generation**, all the pages are generated at build time. Each page is pre-rendered into static HTML, and when the user requests a page, the server sends the **HTML** file based on the request.
### Usage
Since the **pages are pre-built**, the performance of the site is **pretty fast**. Also, it reduces the load to the backend. 
### Example
**Gatsby** uses Static Site Generation.

## Incremental Static Generation (ISG):
In **Incremental Static Generation**, pages are built **statically** the same as in **SSG**, but on a per-page basis as they are requested. If a page is not pre-built at build time, it is built when first requested and later also, served as a **static site**.
### Usage
Since the pages are **built only when requested** the build time is much less and also as they are served as **static pages** from the next time they are pretty fast later. But it is pretty complex to implement compared to **SSG** or **SSR**. Also, first-time visitors can experience a delay as the page is built.
### Example
**NextJS** uses Incremental Static Generation.

## Summary
Each of the rendering strategies holds different significance when in use. It's not like one is better than the other. It always depends on your use case. If you like this blog give it a like and write your feedback in the comment below. Also, if want to learn more about **Frontend Engineering** and **Software Engineering** you can follow me on [LinkedIn](https://www.linkedin.com/in/debajit-mallick/) and [X](https://twitter.com/MallickDebajit).