Next-JS — CSR, SSR, and SSG

Next.js is a React framework that gives you building blocks to create web applications. By framework, we mean Next.js handles the tooling and configuration needed for React and provides additional structure, features, and optimizations for your application.

In this blog, we will discuss three different rendering techniques which are. And all three techniques are supported on Next.js.

1. Client Side Rendering
2. Server Side Rendering
3. Static Site Generation

Let's start with each one of them and get into the details of what they actually mean.

Note: We will try to understand each rendering technique by using an example of fetching a list of items(list of students) and showing a
detail page(student detail) with the click of an item.

Student Info App:

Students Info App

Client Side Rendering:

In CSR a server renders a blank page along with a reference to a javascript bundle that goes up to the client and the client renders a blank page. The client starts interpreting that bundle of javascript which is probably a react app. Then react creates a DOM element that draws the UI on the browser.

• Renders fast — The page renders quickly after the initial page load time.
• Offers quicker navigation of the website — This is possible because placeholders are loaded first.
• Puts less load on the server — The Javascript is executed on the client’s browser, putting less load on the server.
• Works amazing with PWA (Progressive Web Apps) — Again, this is because the code can be entirely rendered on the browser.
• Is interactive — The rendered page is interactive.

Using a sequence diagram, let’s understand CSR with the help of the Students Info App mentioned above Info App.

Server-Side Rendering:

SSR is where the server returns a ready-to-render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements. With SSR, you can render the JavaScript code on the server and send indexable HTML to the user. The HTML is thus generated during runtime so that it can reach search engines and users at the same time.

Benefits of Server-Side Rendering

• Faster load time. A server-side rendered application speeds up page loading when the user suffers from a slow internet connection. …
• Easy indexation by search engines. …
• There are fewer issues with social media indexing. …
• Better in terms of accessibility.

Using a sequence diagram, let’s understand SSR with the help of the Students Info App mentioned above Info App.

Static Site Generation:

SSG is pre-rendering your React app into HTML at build time.

Pros of SSG:

• You can boost performance using CDN caching without a lot of extra configuration,
• Your static page is always online even if your backend or data source goes down,
• Your page is much faster than a server-side rendered one because the entire logic was executed at build time.

Using a sequence diagram, let’s understand SSG with the help of the Students Info App mentioned above Info App.

That’s it for this one. I’ll be writing another article explaining Incremental Static Regeneration soon. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below.