Exploring Web Rendering Strategies: A Deep Dive into CSR, SSR, SSG and ISG

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)

2. Server-Side Rendering (SSR)

3. Static Site Generation (SSG)

4. 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 and X.