CSR vs SSR vs SSG vs ISR in Next.js
November 04, 2025
Index
Before we understand what the 4 key terms in Next.js are, let’s see what the build process of Next.js is.
The source code is whatever code that we write. Build phase is when we do npm run build or npm run dev and this gets the transforms our files into optimized files that are ready to be served. Once the files are built, the server handles everything that we talk about
earlier in this article, they are deployed to a hosting server and then comes the web browser client that receives the pre-rendered HTML
from the server for loading and then it downloads all the required JavaScript to display the UI.
CSR (Client Side Rendering)
Client-Side Rendering is a way of rendering web pages on the browser side. This is core React approach, as React works this way.
When a user enters a URL in the browser, here’s what happens step by step:
- The browser sends a request to the server (for example, to Vercel, Netlify, or any hosting provider).
- The server responds with a mostly empty HTML file. It only contains a
<div id="root"></div>and a reference to JavaScript bundles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
<script defer src="/static/js/main.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>- The browser starts downloading the JavaScript for your app. Until this JavaScript finishes loading and running, the user just sees a blank page or a loading screen.
- Once JavaScript is loaded, React (or Next.js in CSR mode) builds the DOM in the browser and injects all the content dynamically.
- If any additional data is needed (for example, user info or products list), JavaScript makes API calls to fetch it and then updates the screen.
- Now the page becomes fully interactive: buttons, forms, animations, etc., all work.
- Since we are returning an empty page initially, search engines can’t rank well for such apps which have CSR (React or Next.js CSR). So this is not a very good approach for SEO.
Server Side Rendering (SSR)
Server-Side Rendering is another way of rendering web pages, but this one renders content in the server and sends ready HTML files to the browser.
When a user enters an address in the browser:
- The browser sends a request to the server asking for that page.
- The server processes the request.
- It fetches any required data (from a database or API).
- It runs your React/Next.js code on the server to build the page.
- The server generates a complete HTML page with all the text, images, and data already inside.
- This ready-made HTML is sent to the browser, which immediately displays the full page to the user.
- Once the page is visible, the browser downloads and runs the JavaScript which makes the page interactive (buttons, forms, etc.).
So in SSR, the HTML is prepared on the server instead of the browser.
Static Site Generation (SSG)
Here, we generate at build time, meaning:
- Next.js goes through your app and pre-renders each page into plain HTML, CSS, and JavaScript ahead of time.
- This happens once during the build process, not on every user request, hence build time can be long.
- The client fetches directly from server and displays the page. So server just instantly serves the content.
- It is mostly used in CMS (Content Management System).
Incremental Static Regeneration (ISR)
Incremental Static Regeneration (ISR) is like an upgrade to Static Site Generation (SSG). It allows static pages to update automatically without needing to rebuild or redeploy your whole site every time content changes.
How SSG and ISR works
- You deploy your site. Next.js generates static pages (
.html) for all your blogs at build time. - A reader visits your blog. The page is instantly served from the CDN so it is super fast.
- You edit the blog post in your CMS (like Strapi, Sanity, or WordPress).
- The next visitor triggers regeneration. When the first person visits that page after your chosen interval (say 60 seconds), Next.js refreshes the page, fetches new data from your CMS, and rebuilds that one page in the background.
- So there is no rebuild needed and no downtime.
How will you decide which one is better?
Each one has its own use cases and advantages. You need to decide on the following factors:
- Build time - Is build time important for you, on the client side or on the server side?
- Dynamic content - How often does your content get updated, so choose based on the use case.
- Search Engine Optimization - SSR and SSG/ISR are SEO-friendly because search engines receive complete HTML.
- Rendering time - Which rendering time is important for you? Is build time important or server-to-client time, etc?
Hope you enjoyed this article. If you liked it please do drop a like and subscribe to get notifications directly to your email.
See you in the next one.