Rendering Modes

Next.js looks at the data fetching in your page components to determine how and when to prerender your page. Here are the different modes:

Static Generation Pages built at build time into HTML. CDN cacheable.

Server-side Rendering Pages built at run time into HTML. Cached after the initial hit.

Client-side Rendering Single-page app

By default, all pages are prerendered, even if they don't export a data fetching method. You choose the prerendering method (static or SSR) by what data function you export in your page component.

For client-side rendering, fetch your data inside your components. You can mix and match these rendering modes to have a genuinely hybrid app ✨.