Next.js offers multiple rendering strategies: Static Site Generation (SSG) for build-time rendering, Server-Side Rendering (SSR) for per-request rendering, Incremental Static Regeneration (ISR) for static pages with background revalidation, and hybrid approaches that mix strategies per route based on content requirements.
Next.js provides flexible rendering strategies that can be mixed and matched across your application:
With React Server Components, the model shifts:
cookies(), headers(), searchParams, or unstable_noStore() opts into dynamic renderingfetch with next: { revalidate: 60 } enables ISR-like behaviorrevalidatePath() and revalidateTag() for manual cache invalidationReal-world apps often combine strategies:
// pages/static.tsx - SSG (default)
export default function StaticPage({ data }) {
return <div>{data.title}</div>;
}
export async function getStaticProps() {
const data = await fetchData();
return { props: { data } };
}
// pages/ssr.tsx - SSR
export async function getServerSideProps(context) {
const { req, res, query } = context;
const data = await fetchUserData(req.cookies.userId);
return { props: { data } };
}
// pages/isr.tsx - ISR with 60-second revalidation
export async function getStaticProps() {
const data = await fetchProducts();
return {
props: { data },
revalidate: 60, // Regenerate every 60 seconds
};
}