Topic 24 of 39
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
tsx
// 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
Q:
When should you use Static Rendering?
A:
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.
example
tsx
// 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.