4 options for rendering in @nextjs:

1. Static Site Generation (SSG)
2. Incremental Static Generation (ISG)
3. Server-side Rendering (SSR)
4. Client-side rendering (CSR)

Here's how I pick between these options. 👇 🧵

1. Static site generation (SSG)

I use this when:
- The page shows the same content for all users
- The page rarely changes
- I’m willing to redeploy when it does.

Example: Blog, docs, static corporate website pages.

2. Incremental Static Generation (ISG)

I use this when:
- There are too many static pages to statically generate them all up front
- Or, the page changes frequently, so I don't want to redeploy each time it changes

Example: Large E-commerce site

3. Server-side rendering (SSR)

I use this when:
- The page shows different content for each user
- I want to render it on the server for better performance and SEO

Example: Bank account page

4. Client-side rendering (CSR)

I use this when:
- A portion of the page shows different content for each user
- I want to lazy load a portion of the page

Examples: Load “below the fold” content when a user scrolls down. Load a user's Avatar on a static or server-rendered page.

View original on X