The App Router transformed React application design by introducing server components, hierarchical layouts, and first-class data fetching into the framework.
Server Components and Architecture
Server Components operate on the server by default without client-side JavaScript unless explicitly opted in. The guiding principle: start server-first, add "use client" at the smallest sub-tree that truly needs it.
app/
├── layout.tsx & page.tsx
├── (marketing)/layout.tsx & page.tsx
├── (app)/layout.tsx with dashboard & settings
├── @modal for parallel/intercepted routes
└── api/analytics/route.ts
Route groups like (marketing) don't affect URLs. Parallel routes like @modal render alongside primary routes. Intercepted routes mount one route inside another.
Data Management Patterns
Caching Strategy
Static content with ISR revalidates on a timer:
export const revalidate = 600;
const res = await fetch(url, {
next: { revalidate: 600, tags: ["articles"] }
});Selective revalidation post-mutation:
revalidateTag("articles");
revalidatePath("/blog");Server Actions and Forms
Forms invoke server code directly without API routes:
"use server";
export async function createTodo(formData: FormData) {
// ... process
revalidatePath("/todos");
}Client-side pending states use useFormStatus() for optimistic feedback.
Streaming and Progressive Rendering
<Suspense> boundaries stream UI as data resolves, enabling faster perceived performance:
<Suspense fallback={<Skeleton />}>
<SlowWidget />
</Suspense>State and Client Boundaries
Keep server data on the server. Pass serialized props to small client islands. Local state and lightweight stores like Zustand work at the closest boundaries. Minimize global providers - only use them for cross-cutting concerns like theming.
Authentication and Route Protection
Protect routes at the server by fetching sessions in Server Components before rendering:
const session = await getSession();
if (!session) redirect("/login");Middleware handles coarse-grained redirects and domain logic but shouldn't enforce sensitive checks.
SEO and Metadata
generateMetadata() creates dynamic page titles and Open Graph tags:
export async function generateMetadata({ params }) {
const post = await fetchPost(params.slug);
return {
title: post.title,
openGraph: { title: post.title, type: "article" }
};
}Error Handling
error.tsx catches segment errors with reset functionality. notFound.tsx handles 404s. Throw notFound() from server code to trigger.
Performance and Observability
Cache intelligently with tags for surgical revalidation. Use next/image and next/font for metrics. Stream large widgets via Suspense. Keep client islands small. Global state libraries are often unnecessary with composed client islands.