Comparing Next.js: Server-Side Rendering (SSR) vs. Static Site Generation (SSG) with a Focus on Incremental Static Regeneration (ISR)
Citing Create React App as a prime example of a Client-Side Rendered (CSR) application, Next.js emerged as the gateway to the realm of Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR). Notably, Next.js elevates server-side rendering capabilities with a myriad of options, particularly emphasising the power of Static Site Generation (SSG) and Incremental Static Regeneration (ISR). This post will delve into Next.js's robust features, focusing on its ability to seamlessly generate static sites and efficiently update them using ISR, accompanied by practical use cases.
Pre-rendering in Next.js
In Next.js, pre-rendering takes center stage, encompassing both Server-Side Rendering (SSR) and Static Site Generation (SSG). While SSR dynamically generates HTML on each request, SSG pre-builds HTML pages at build time, eliminating the need for Client-Side Rendering (CSR). This means that with a simple npm run build in a Next.js project, you can generate static pages such as marketing pages and blog posts.
The beauty of SSG lies in its efficiency and scalability. During the build process, pages are pre-generated, allowing them to be instantly available on a Content Delivery Network (CDN) across the globe. This not only speeds up content delivery to users but also alleviates the burden on your web server, ensuring optimal performance.
SSG combines the benefits of CSR and SSR, leveraging server-side processing to create HTML while taking advantage of CDN distribution. The Next.js documentation strongly advocates for SSG whenever possible, highlighting its ability to optimize performance and simplify deployment.
While the Next.js documentation provides comprehensive information, some advanced SSG concepts might pose challenges. The following use cases aim to demystify these concepts and provide clarity on leveraging the full potential of SSG in Next.js.
When you use SSR , SSG , ISR and CSR with nextjs ?
Certainly! Next.js, a popular React framework, offers various methods for rendering pages and managing data. Here's a brief overview of when to use SSR (Server-Side Rendering), SSG (Static Site Generation), ISR (Incremental Static Regeneration), and CSR (Client-Side Rendering) with Next.js:
The choice between SSR, SSG, ISR, and CSR in Next.js depends on factors such as data freshness, performance requirements, SEO considerations, and the nature of your application or website.
Let's delve deeper into each rendering method with examples in the context of Next.js:
Code
Code samples can be found in this repo here https://github.com/prabhatpankaj/next-ssr-ssg-isr-blog
for better understanding i have added same API endpoint for all rendering methods as below:
Server-Side Rendering (SSR):
import React from 'react';
import fetch from 'isomorphic-unfetch';
const SSR = ({ imageUrl }) => {
return (
<div>
<h1>Random Dog Image (SSR)</h1>
<img src={imageUrl} alt="Random Dog" />
</div>
);
};
export async function getServerSideProps() {
const res = await fetch('https://dog.ceo/api/breeds/image/random');
const data = await res.json();
return {
props: {
imageUrl: data.message,
},
};
}
export default SSR;
Static Site Generation (SSG):
import React from 'react';
import fetch from 'isomorphic-unfetch';
const SSG = ({ imageUrl }) => {
return (
<div>
<h1>Random Dog Image (SSG)</h1>
<img src={imageUrl} alt="Random Dog" />
</div>
);
};
export async function getStaticProps() {
const res = await fetch('https://dog.ceo/api/breeds/image/random');
const data = await res.json();
return {
props: {
imageUrl: data.message,
},
};
}
export default SSG;
Incremental Static Regeneration (ISR):
import React from 'react';
import fetch from 'isomorphic-unfetch';
const ISR = ({ imageUrl }) => {
return (
<div>
<h1>Random Dog Image (ISR)</h1>
<img src={imageUrl} alt="Random Dog" />
</div>
);
};
export async function getStaticProps() {
const res = await fetch('https://dog.ceo/api/breeds/image/random');
const data = await res.json();
return {
props: {
imageUrl: data.message,
},
revalidate: 10, // Re-generate every 10 seconds
};
}
export default ISR;
Client-Side Rendering (CSR):
领英推荐
import React, { useEffect, useState } from 'react';
const CSR = () => {
const [imageUrl, setImageUrl] = useState('');
useEffect(() => {
const fetchDogImage = async () => {
const res = await fetch('https://dog.ceo/api/breeds/image/random');
const data = await res.json();
setImageUrl(data.message);
};
fetchDogImage();
}, []);
return (
<div>
<h1>Random Dog Image (CSR)</h1>
{imageUrl && <img src={imageUrl} alt="Random Dog" />}
</div>
);
};
export default CSR;
Build this code using npm run build .
run this code using npm run start
every time i refresh the page , same dog image is getting displayed . also if you see it always give X-Nextjs-Cache: HIT as below.
In Next.js, the X-Nextjs-Cache header provides information about the caching status of a response. It can have various values indicating the caching behavior. Two common values are HIT and STALE. Let's discuss each of them:
These caching mechanisms provided by Next.js help optimize performance by serving cached content when possible (HIT) and efficiently managing stale content to ensure a smooth user experience (STALE).
Reference :