Bug

[asadullah027]

what is the concept of ssr in the next app router and slots

[falakahmad]

SSR in Next.js App Router — Full Breakdown

---

What is SSR in the Context of App Router?

In the App Router (introduced in Next.js 13+), SSR isn't a mode you "opt into" like the old getServerSideProps — it's the default behavior. Every component in the app/ directory is a React Server Component (RSC) by default, meaning it renders on the server on every request.

The mental shift: instead of thinking "which pages use SSR?", think "which components need to run on the client?" — and explicitly mark those with 'use client'.

---

How SSR Works in App Router

Browser Request
      ↓
Next.js Server
      ↓
Server Components render → fetch data directly (no API round-trip)
      ↓
HTML streamed to browser
      ↓
Client Components hydrate (become interactive)

Server Component (default — SSR)

jsx

// app/products/page.jsx
// No 'use client' = Server Component = renders on server per request

async function ProductsPage() {
  // Direct DB/API call — runs only on server, never exposed to browser
  const products = await fetch('https://api.example.com/products', {
    cache: 'no-store' // <- this makes it true SSR (dynamic, not cached)
  });
  const data = await products.json();

  return (
    <ul>
      {data.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

export default ProductsPage;

Client Component (opt-in)

jsx

'use client'; // <- this opts out of SSR for this component

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

---

Caching Modes — This is Critical in App Router

The fetch() cache option controls how the server renders:

Cache Option | Behavior | Equivalent to -- | -- | -- cache: 'no-store' | Fetches fresh on every request | Classic SSR cache: 'force-cache' | Fetches once, reuses forever | SSG (Static) next: { revalidate: 60 } | Rebuilds every N seconds | ISR

---

Common Misconceptions

• ❌ "I need getServerSideProps for SSR" → That's Pages Router only. In App Router, just make an async Server Component.
• ❌ "Slots are like named children" → Similar concept, but slots support independent navigation, loading states (loading.jsx), and error boundaries per slot.
• ❌ "'use client' means no SSR" → Client Components still get server-rendered once for the initial HTML, then hydrated. It's not purely client-side.