SSR vs SSG Rendering

Next.js provides different caching mechanisms for how web pages are rendered on the backend server.

1. Server-Side Rendering (SSR)

Also known as Dynamic Rendering. The server generates the HTML snapshot dynamically at request time. Every time a user requests the page, the server fetches the most current data from the database.

This is ideal for volatile data like user dashboards, dashboards reporting live metrics, or heavily personalized shopping carts.

2. Static Site Generation (SSG)

Next.js pre-renders the entire HTML snapshot during the build process (before deployment) instead of at request time.

When a user visits the URL, the pre-built HTML is instantly served from a global CDN without waking up the node server or polling a database.

SSG offers maximum performance but is only viable for data that rarely changes, such as marketing landing pages or standard documentation sites.

3. Incremental Static Regeneration (ISR)

ISR is a hybrid approach. Next.js serves the fast SSG version of a page from the CDN cache, but you provide a specific "revalidation" time format.

If you set the revalidation to 3600 (one hour), the server will quietly regenerate the page in the background every hour and swap out the cached CDN version smoothly. This provides SSG speed while keeping data relatively fresh.