1. Static Site Generation (SSG)
SSG generates HTML at build time, creating static files that are served to the client. This approach is ideal for pages with content that doesn't change frequently, enabling fast load times and efficient caching.
AMAN KUMAR SINGH - BLOG
Understanding All Rendering Methods in Next.js
46
1
Date: December 13, 2024
export async function getStaticProps() {
// Fetch data at build time
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: { data },
};
}
Use SSG for pages like blogs, documentation, or marketing sites where content updates are infrequent.
2. Server-Side Rendering (SSR)
SSR generates HTML for a page on each request, ensuring that the content is always up-to-date. This method is beneficial for pages requiring real-time data or frequently changing content.
export async function getServerSideProps(context) {
// Fetch data on each request
const res = await fetch(`https://api.example.com/data?id=${context.params.id}`);
const data = await res.json();
return {
props: { data },
};
}
SSR is suitable for dashboards, user profiles, or pages displaying dynamic data.
3. Incremental Static Regeneration (ISR)
ISR updates static pages after they've been built, enabling you to serve static content while keeping it fresh. You can specify a revalidation period after which the page will be regenerated in the background.
javascript Copy codeexport async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: { data },
revalidate: 60, // Revalidate every 60 seconds
};
}
ISR is ideal for e-commerce product pages, news articles, or any content that benefits from periodic updates without rebuilding the entire site.
4. Client-Side Rendering (CSR)
With CSR, the page is rendered entirely in the browser using JavaScript. The initial HTML sent from the server is minimal, and the content is fetched and rendered on the client side.
javascript Copy codeimport { useEffect, useState } from 'react';
function Page() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then((res) => res.json())
.then((data) => setData(data));
}, []);
if (!data) return <p>Loading...</p>;
return <div>{data.content}</div>;
}
export default Page;
CSR is appropriate for highly interactive pages where SEO is not a primary concern, such as dashboards or user-specific content.
5. Partial Pre-rendering (PPR)
PPR enables rendering parts of a page on the server and parts on the client. This approach allows for faster load times by streaming content as it becomes available.
javascript Copy codeimport { Suspense } from 'react';
function Page() {
return (
<div>
<h1>My Page</h1>
<Suspense fallback={<p>Loading...</p>}>
<Comments /> {/* This component fetches data on the client */}
</Suspense>
</div>
);
}
export default Page;
PPR is beneficial for pages where certain components can be rendered immediately, while others (e.g., comments, related posts) can load asynchronously.
Conclusion
Next.js provides a flexible framework to implement various rendering methods tailored to your application's needs. By understanding and leveraging these strategies, you can enhance performance, improve SEO, and deliver a better user experience.