Static Rendering
Overview
Static Rendering (SSG) is the default in Next.js. Routes are rendered at build time, and the HTML is cached on a CDN. This provides the absolute fastest load times and cheapest server costs because the server doesn't do any work on request.
Syntax
// This component is statically rendered at build time by default!
export default async function StaticAbout() {
const data = await fetch('https://cms.com/about').then(r => r.json());
return (
<article>
<h1>{data.title}</h1>
<p>{data.content}</p>
</article>
);
}Common Pitfalls
Assuming data will update instantly when the database changes. Static pages must be revalidated (ISR) or rebuilt to show new data.
Trying to access request-time information (like cookies or URL parameters) in a static route. This forces dynamic rendering.
Interview Questions
When should you use Static Rendering?
For pages where data doesn't change frequently and is the same for all users, such as marketing pages, blog posts, documentation, and e-commerce product listings.
Real-World Example
A company terms of service page that only changes once a year and is cached globally on the Edge.
// Since it has no dynamic functions (headers, cookies)
// Next.js statically generates this at build time.
export default function Terms() {
return <div>Our legal terms...</div>;
}Check Your Knowledge
Test your understanding of Static Rendering with these quick questions.