One of the superpowers of Next.js is its flexibility when it comes to rendering strategies. Whether you're building a blazing-fast landing page, a dashboard, or a blog, Next.js lets you pick the best rendering method for the job.

When building web applications using frameworks like Next.js, it's important to understand where and how your HTML is generated:
Server-side? Client-side? At build time? Dynamically?

Let’s dive deep into all these rendering paradigms one by one.

---

🚀 1. Server-Side Rendering (SSR)

What Happens:

• The server generates the full HTML for the requested page on every request.

• The browser receives fully-formed HTML from the server, displays it immediately, and then attaches JavaScript for interactivity.

How it works:

• Server processes the page → Generates HTML → Sends to Browser

• Good for SEO (since crawlers immediately see the real content).

• Every page load triggers a new server response.

Special in Next.js:

• When you load a page, the server also sends RSC (React Server Components) for other linked pages.

• RSC: Special lightweight responses (not full HTML) for internal links to make navigation blazing fast.

RSCs are not HTML—they're a custom serialized format designed for fast hydration and interactivity.

Example:

export const dynamic = 'force-dynamic';
export async function GET() {
  return Response.json({ data: 'Hello from Server!' });
}

Key Points:

• Good SEO

• Slower if server is overloaded

• Used for dynamic, real-time pages

---

🎨 2. Client-Side Rendering (CSR)

What Happens:

• Server sends a minimal HTML shell (basically an empty <div id="root"></div>).

• JavaScript kicks in on the browser and creates the entire page using DOM manipulation.

How it works:

• Server sends basic HTML + bundled JS + CSS → Browser executes JS → Renders the page

• Common with React, Vue, Angular.

Process:

• Bundle all HTML in JavaScript.

• Send 4 assets to the browser:

  • HTML file

  • JavaScript bundle

  • CSS styles

  • Assets (images/fonts)

Disadvantages:

• Poor SEO (empty page seen by search engines before JavaScript runs)

• Slower first paint

---

🏗️ 3. Static Site Generation (SSG)

What Happens:

• Pages are pre-rendered at build time.

• When you deploy, HTML is already created and stored on a CDN or server.

• No server calculation happens during page load—it’s super fast!

Dynamic vs Static:

• In SSR, the server generates pages at request time.

• In SSG, the server pre-builds the pages once during deployment.

Functions:

• generateStaticParams() — Used for dynamic routes to tell Next.js all possible paths at build time.

Example:

export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());
  return posts.map(post => ({ id: post.id }));
}

• export const dynamicParams = false;

  • Ensures that the page will only render for pre-generated paths.

  • No fallback dynamic generation during runtime.

---

🔥 4. Incremental Static Regeneration (ISR)

What Happens:

• It's an extension of SSG.

• Allows pages to be updated after the site has been built, without rebuilding the whole app.

How it works:

• You can specify a revalidation time.

• After the time expires, Next.js will regenerate the page in the background when a new user requests it.

Example:

export const revalidate = 60; // Rebuild page every 60 seconds

Real-World Use:

• Blogs where posts are updated often.

• E-commerce product pages where prices or stock might change every few minutes.

---

🛠️ 5. Methods for Rendering Static Pages Dynamically

If your page needs dynamic behavior based on runtime data, you can control it using:

export const dynamic = 'force-dynamic';

This forces dynamic rendering even if the page was eligible for static generation.

Other runtime features that force dynamic rendering:

• Headers (e.g., Authorization)

• Cookies (e.g., session tokens)

• SearchParams (URL query strings)

• Connections (client-specific context)

• Draft mode (preview unpublished content)

If you use any of these, Next.js cannot cache the page statically and must render it dynamically.

---

📈 Visual Flowchart: How HTML is Generated

User Requests a Page
      |
  +---|---+
  |       |
Server   Client
  |       |
HTML Generated  HTML Shell + JS Bundle
  |       |
Browser Displays Page

---

📚 Quick Glossary

---

✨ Conclusion

Understanding how HTML is created and delivered is critical to building fast, SEO-friendly, and scalable web applications with Next.js.

Next.js gives you the power to choose the right rendering method for each page depending on your needs.