Next.js App Router

Next.js App Router: Server and Client Components

The Next.js App Router executes React Server Components (RSC) on the server by default inside the app/ directory. Because server components never ship their code to the browser, your JavaScript bundle stays small and pages load faster.

You only opt into browser execution when a component needs state, effects, or user event listeners. Adding 'use client' at the top of a file marks the boundary between server and browser code.

flowchart TD
    A["Incoming Request"] --> B["App Router Tree"]
    B --> C["Server Component (Zero Browser JS)"]
    C --> D["Client Component Leaf ('use client')"]
    D --> E["Hydrated Interactive Button or Form"]

Choosing Between Server and Client Components

Keep data fetching, database queries, and heavy formatting libraries on the server. Move only interactive UI controls into Client Components.

• Server Components (Default): Read databases, access private API keys, format dates or Markdown, and render static markup.
• Client Components ('use client'): Use useState, useEffect, click handlers (onClick), or browser APIs like window and localStorage.

Writing a Server Component

Server Components can be async functions that await backend data directly before returning JSX.

// app/orders/page.tsx (Server Component)
import OrderFilterButton from './OrderFilterButton';

interface Order {
  id: string;
  total: number;
}

export default async function OrdersPage() {
  const res = await fetch('https://api.example.com/orders', {
    cache: 'no-store',
  });
  const orders: Order[] = await res.json();

  return (
    <section className="p-6 space-y-4">
      <h2 className="text-2xl font-bold">Recent Orders ({orders.length})</h2>
      <OrderFilterButton />
    </section>
  );
}

Adding a Client Component Leaf

Place 'use client' as the very first line of interactive child components so the parent page stays on the server.

// app/orders/OrderFilterButton.tsx
'use client';

import { useState } from 'react';

export default function OrderFilterButton() {
  const [onlyPaid, setOnlyPaid] = useState(false);

  return (
    <button
      type="button"
      onClick={() => setOnlyPaid((prev) => !prev)}
      className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
    >
      {onlyPaid ? 'Showing Paid Orders' : 'Show Paid Only'}
    </button>
  );
}

Common Mistakes

• Putting 'use client' at the top of layout.tsx: This forces every child page into the client bundle and blocks async server data fetching.
• Passing functions from Server to Client Components: Non-serializable values like regular functions cannot cross the server-client boundary; use Server Actions instead.
• Importing server-only modules in a Client Component: Never import database clients or fs into a 'use client' file.

Frequently Asked Questions

Do Client Components still render on the server first?

Yes, Next.js pre-renders Client Components into initial HTML on the server, then hydrates them in the browser so event handlers attach.

Can a Client Component render a Server Component inside it?

Yes, pass the Server Component as children or another prop from a parent Server Component rather than importing it directly into the client file.

Does 'use client' need to go in every client child file?

No, once a file has 'use client', any module it imports becomes part of the client bundle automatically.