Next.js App Router

Next.js App Router: Building Modern React Server Components

Next.js App Router introduces React Server Components (RSC) to render pages on the server by default. This paradigm reduces client JavaScript bundle sizes and boosts web application performance.

Components inside the app/ folder do not send JavaScript runtime code to the browser unless explicitly declared as Client Components using the 'use client' directive.

flowchart TD
    A["User Request"] --> B["Next.js App Router"]
    B --> C["Server Components (Zero Client JS)"]
    C --> D["Client Components ('use client')"]
    D --> E["Hydrated Interactive UI"]

Server Components vs. Client Components

Understanding when to use Server versus Client components is essential for clean App Router architecture:

• Server Components (Default): Fetch data, access database drivers directly, keep API secrets private, send zero JS to client.
• Client Components ('use client'): Handle browser user events (onClick, onChange), manage state (useState, useReducer), use browser APIs (localStorage).

Building a Server Component

Server components can execute asynchronous data fetching operations directly inside component bodies:

// app/dashboard/page.tsx (Server Component)
async function fetchUserMetrics() {
  const res = await fetch('https://api.example.com/metrics', { cache: 'no-store' });
  return res.json();
}

export default async function DashboardPage() {
  const metrics = await fetchUserMetrics();

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">Analytics Dashboard</h1>
      <p className="mt-2">Active Users: {metrics.activeUsers}</p>
    </div>
  );
}

Adding Interactive Client Components

When interactive UI elements like click listeners or state hooks are required, create a targeted Client Component:

// app/dashboard/CounterButton.tsx
'use client';

import { useState } from 'react';

export default function CounterButton() {
  const [count, setCount] = useState(0);

  return (
    <button 
      onClick={() => setCount(count + 1)}
      className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
    >
      Clicks: {count}
    </button>
  );
}

Best Practices for App Router

• Push Client Components to the Leaves: Keep client components small and nest them deep in your UI tree.
• Never Import Server Code into Client Components: Maintain clean boundaries between server actions and browser state handlers.
• Use React Suspense: Wrap async server components in Suspense boundaries for instant feedback.

Summary

The App Router combines server security and client interactivity seamlessly. Defaulting to Server Components ensures small JavaScript bundles and rapid initial rendering.