Server-Side Rendering (SSR)

🔍 What Is It?

Server-Side Rendering (SSR) generates a fresh HTML response for every incoming request. In Next.js App Router:

• →A route is dynamic (SSR) when it accesses request-specific data: cookies(), headers(), searchParams, or uses fetch with cache: 'no-store'
• →A route is static (SSG) when it has no request-specific dependencies
• →Next.js automatically detects which mode to use — no explicit configuration needed

SSR is the right choice when:

• →Content is user-specific (logged-in user's dashboard)
• →Content changes frequently and must be fresh on every request
• →You need access to request cookies/headers (auth sessions)
• →Real-time data that cannot be stale even for 1 second

🎯 Why Do We Need It?

Static pages are faster but cannot serve personalised content. SSR bridges the gap:

• →Authentication — serve different content based on the user's session
• →Personalisation — show user-specific data, preferences, recommendations
• →Real-time accuracy — stock prices, live inventory, breaking news
• →A/B testing — serve different variants based on cookies

Without SSR, you'd either serve the same page to everyone (wrong) or fetch personalised data client-side (slow, bad UX, bad SEO).

🏗️ What Happens in Real Projects?

SSR routes in a real enterprise app:

• →/dashboard — reads session cookie, fetches user-specific metrics
• →/checkout — reads cart from session, checks real-time inventory
• →/search?q=... — reads searchParams, returns personalised results
• →/account/orders — reads auth cookie, fetches user's orders

Static routes in the same app:

• →/products — same for all users, revalidated every hour (ISR)
• →/blog/[slug] — pre-built at deploy time (SSG)
• →/about, /pricing — pure static HTML

⚙️ How It Works

SSR request lifecycle in App Router:

1. Request hits the server with a cookie session=abc123
2. Next.js identifies the route as dynamic (it reads cookies)
3. The Server Component runs: const session = await getSession()
4. Data is fetched based on the session: await db.query(userId)
5. HTML is rendered and streamed to the browser
6. The browser displays the HTML — no loading spinner for the initial content
7. Client Components hydrate for interactivity

Opting into dynamic rendering:

import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = await cookies(); // This makes the route dynamic
  const token = cookieStore.get('token');
  // ...
}

💻 Example

SSR Patterns in Next.js 14 — Dynamic routes that correctly handle authentication and personalisation.

// app/dashboard/page.tsx
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
import { verifySession } from '@/lib/auth';
import { db } from '@/lib/db';

export default async function DashboardPage() {
  // Reading cookies makes this route dynamic (SSR)
  const cookieStore = await cookies();
  const sessionToken = cookieStore.get('session')?.value;

  if (!sessionToken) {
    redirect('/login');
  }

  const session = await verifySession(sessionToken);
  if (!session) redirect('/login');

  // Fetch user-specific data
  const metrics = await db.metrics.findMany({
    where: { userId: session.userId },
  });

  return (
    <div>
      <h1>Welcome back, {session.user.name}</h1>
      <MetricsGrid metrics={metrics} />
    </div>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits