Next.js App Router: A Deep Dive

Why App Router?

Next.js App Router represents a fundamental shift in how we build React applications. Built on React Server Components, it enables server-first rendering by default while maintaining the interactivity users expect.

Server vs. Client Components

The key mental model: components are server components by default. Add "use client" only when you need browser APIs, event handlers, or React hooks like useState/useEffect. Keep the client boundary as low as possible in your component tree.

Data Fetching

Server components can be async — fetch data directly inside them without useEffect or client-side state management. This is simpler, faster, and eliminates loading waterfalls.

export default async function BlogPage() {
  const posts = await getBlogPosts();
  return (
    <div>
      {posts.map(post => (
        <BlogCard key={post.id} post={post} />
      ))}
    </div>
  );
}

Streaming and Suspense

Use <Suspense> boundaries to stream parts of the page independently. Users see content as it becomes available instead of waiting for the slowest data fetch.

When to Use What

• Server Components: Data fetching, heavy rendering, accessing backend resources
• Client Components: Interactivity, browser APIs, real-time updates
• Route Handlers: API endpoints that don't need a UI
• Server Actions: Form submissions and mutations