67-stack-nextjs15

Next.js 15 App Router Rules

This module covers Next.js 15+ with App Router. For Pages Router, use general React rules.

Component Strategy

Server vs Client Components

Type	Default	Directive	Use When
Server Component	✅ Yes	None needed	Data fetching, no interactivity
Client Component	No	'use client'	Hooks, events, browser APIs

Decision Tree

Does this component need...
├── useState/useEffect/useContext? → Client Component
├── onClick/onChange/onSubmit? → Client Component  
├── window/document/localStorage? → Client Component
├── Only data fetching? → Server Component ✅
└── Only rendering props? → Server Component ✅

Placement Rules

// ✅ Server Component (default)
// No directive needed
async function UserProfile({ userId }: { userId: string }) {
  const user = await getUser(userId); // Direct DB/API call
  return <div>{user.name}</div>;
}

// ✅ Client Component (when needed)
'use client';

import { useState } from 'react';

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

---

Data Fetching

Parallel Fetching (CRITICAL)

// ❌ BAD: Waterfall — each awaits the previous
async function Page() {
  const user = await getUser();       // 100ms
  const posts = await getPosts();     // 100ms
  const comments = await getComments(); // 100ms
  // Total: 300ms
}

// ✅ GOOD: Parallel — all run simultaneously
async function Page() {
  const [user, posts, comments] = await Promise.all([
    getUser(),      // 100ms
    getPosts(),     // 100ms  
    getComments()   // 100ms
  ]);
  // Total: ~100ms
}

Streaming with Suspense

import { Suspense } from 'react';

async function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* Instantly visible */}
      
      <Suspense fallback={<LoadingSkeleton />}>
        <SlowComponent />
        {/* Streams in when ready */}
      </Suspense>
    </div>
  );
}