Next.js App Router Production Patterns: Server Components and Beyond

Server Components by Default

Server components render on the server, reducing JavaScript bundle size and improving initial load. Use them for data fetching, database queries, and static content. Only use client components when you need interactivity.

// Server Component (default)
export default async function Page() {
  const data = await fetchData(); // Runs on server
  return <div>{data}</div>;
}

// Client Component (when needed)
'use client';
export default function InteractiveComponent() {
  const [state, setState] = useState();
  return <button onClick={...}>Click</button>;
}

Streaming and Suspense

Use Suspense boundaries to stream content progressively. This improves perceived performance by showing content as it loads, rather than waiting for everything.

Route Handlers

Route handlers replace API routes, providing a simpler API for server-side logic. They're perfect for webhooks, form submissions, and API endpoints that don't need React.

Performance Optimization

Leverage static generation for pages that don't change often. Use dynamic rendering for personalized content. Implement ISR (Incremental Static Regeneration) for content that updates periodically.