HTML Rendering Methods

With SSR, the server generates the full HTML for a page every time a user requests it.

• How it works: Click a link $\rightarrow$ Server fetches data $\rightarrow$ Server builds HTML $\rightarrow$ The browser displays the finished page.
• Pros: Great for SEO (search engines see the content immediately) and fast “Initial Load.”
• Cons: Higher server load; every click can feel like a “hard refresh.”

With CSR, the server sends a “blank” HTML shell and a large JavaScript file. The user’s browser (the “client”) is responsible for building the page.

• How it works: Click a link → Browser downloads empty HTML → Browser runs JS → JS fetches data and builds UI.
• Pros: Very fast transitions between pages (no refresh) and reduced server costs.
• Cons: Poor SEO (unless optimized), and users with slow devices might see a blank loading screen for a few seconds.

* SEO: Search Engine Optimization

ISR is the “best of both worlds” approach popularized by frameworks like Next.js. It allows you to create or update static pages after you’ve built your site, without needing to rebuild the entire thing.

• How it works:
  1. The page is generated as a static file (like a flyer).
  2. A “revalidation” time is set (e.g., 60 seconds).
  3. If a user visits after 60 seconds, they see the old page while the server “silently” generates a fresh version in the background for the next user.
• Pros: Incredible performance (serving static files) while keeping data relatively fresh.
• Cons: Users might occasionally see slightly outdated data for one visit.

RSC is the latest paradigm where components are rendered exclusively on the server and never sent as JavaScript to the client.

• How it works: Components run on the server → Server sends a light “stream” of UI (not a full HTML refresh) → Client integrates it into the existing page.
• Pros: * Zero Bundle Size: No JavaScript for server components is sent to the browser.
  • Direct Backend Access: Can query databases directly inside the component.
  • Excellent SEO: Content is fully rendered on the server, making it easy for crawlers.
• Cons: Cannot use interactive hooks (like useState or useEffect)—these must be handled by “Client Components.”
• Release: Introduced in React 18 and stabilized in React 19 (2024.12).