CodeParkThey differ in when and where the HTML is made: at build time, per request, or in the browser.
- SSG (Static Site Generation) renders pages to HTML at build time and serves them from a CDN (a network of servers close to users). It is the fastest option. Use it for marketing pages, docs and blogs.
- ISR (Incremental Static Regeneration) is SSG plus revalidation. Pages are rebuilt in the background after a time window, or on demand. Use it for product pages or CMS content that changes now and then.
- SSR (Server-Side Rendering) renders on every request. So it can use cookies, headers and fresh data. Use it for personalized dashboards or search results.
- CSR (Client-Side Rendering) builds the UI in the browser after JavaScript loads. Use it for highly interactive, private UI where SEO doesn't matter.
In the App Router you rarely pick a mode by hand:
- Routes are static by default.
- A route becomes dynamic when it uses request-time APIs, like
cookies(). - A route uses ISR when you set
revalidate. - CSR means fetching data in the browser, or UI that only works in the browser.
Note: Client Components are not the same as CSR. Next.js still prerenders Client Components to HTML on the server. Only their data fetching or browser-only parts happen on the client.
- SSG renders at build time. It is the fastest option and suits static content.
- ISR is static pages plus background revalidation.
- SSR renders per request, for personalized or fresh data.
- CSR renders in the browser, for interactive and private UI.
- The App Router chooses static or dynamic rendering for each route automatically.
- Client Components are still prerendered on the server, so they are not the same as CSR.