SSR, SSG, ISR, RSC, CSR

These terms represent different ways a web server and browser "collaborate" to turn your code into a visible page.

🏛️ Static Site Generation (SSG)

The page is built once at build time (when you run npm run build).

• How it works: The server generates HTML files for every page before the site goes live.
• Pros: Blazing fast; works great with CDNs; excellent for SEO.
• Best for: Blogs, documentation, marketing sites.

🔄 Incremental Static Regeneration (ISR)

A "hybrid" that allows you to update static pages after the site is live, without a full rebuild.

• How it works: You set a "revalidate" timer (e.g., 60 seconds). If a user visits after that time, the server generates a fresh version in the background.
• Pros: Fast like SSG, but keeps data fresh.
• Best for: E-commerce product pages, news feeds.

🌐 Server-Side Rendering (SSR)

The page is generated on the server every time a user requests it.

• How it works: When a user hits a URL, the server fetches data, builds the HTML, and sends it back immediately.
• Pros: Real-time data; highly personalized (e.g., user profiles).
• Best for: Social media feeds, banking dashboards.

⚡ React Server Components (RSC)

A modern approach (standard in Next.js App Router) where components stay on the server.

• How it works: The component logic runs only on the server. Only the result (not the JavaScript code for the component) is sent to the browser.
• Pros: Drastically reduces the amount of JavaScript sent to the client; faster loading.
• Best for: Modern Next.js apps using the /app directory.

💻 Client-Side Rendering (CSR)

The browser does all the work.

• How it works: The server sends a nearly empty HTML file and a large JavaScript bundle. The browser then executes the JS to "paint" the UI.
• Pros: Smooth "app-like" transitions after the initial load.
• Best for: Interactive tools, SaaS apps where SEO doesn't matter.

---

💡 The Key Difference:
It's all about when and where the HTML is created:

• SSG: At build time (Server).
• SSR: At request time (Server).
• CSR: At runtime (Browser).