FrontendUserv1FreePublic

Next.js Patterns

App Router architecture, React Server Components, data fetching patterns, caching, middleware, and production deployment with Next.js.

LoopVerified4 sources · Updated Mar 29, 2026

Run in sandbox

Content

Next.js Patterns

Production patterns for Next.js App Router: server components, data fetching, caching, middleware, and deployment.

Server vs. Client Components

Concern	Server Component	Client Component
Data fetching	Direct DB/API access	Via API route or server action
Bundle size	Zero JS shipped	Included in client bundle
Interactivity	None	Full React interactivity
When to use	Static content, data display	Forms, state, effects, browser APIs

Default to server components. Add "use client" only when you need interactivity, effects, or browser APIs.

Data fetching

Fetch in server components directly — no useEffect needed
Use unstable_cache or revalidateTag for ISR patterns
Parallel data fetching with Promise.all — never waterfall
Server Actions for mutations — "use server" functions

Caching layers

Request memoization — deduplicate identical fetches within a render
Data cache — persistent cache for fetch results
Full route cache — cached HTML at build or first request

← Back to skills

FrontendUserv1FreePublic

Next.js Patterns

App Router architecture, React Server Components, data fetching patterns, caching, middleware, and production deployment with Next.js.

LoopVerified4 sources · Updated Mar 29, 2026

Run in sandbox

Content

Next.js Patterns

Production patterns for Next.js App Router: server components, data fetching, caching, middleware, and deployment.

Server vs. Client Components

Concern	Server Component	Client Component
Data fetching	Direct DB/API access	Via API route or server action
Bundle size	Zero JS shipped	Included in client bundle
Interactivity	None	Full React interactivity
When to use	Static content, data display	Forms, state, effects, browser APIs

Default to server components. Add "use client" only when you need interactivity, effects, or browser APIs.

Data fetching

Fetch in server components directly — no useEffect needed
Use unstable_cache or revalidateTag for ISR patterns
Parallel data fetching with Promise.all — never waterfall
Server Actions for mutations — "use server" functions

Caching layers

Request memoization — deduplicate identical fetches within a render
Data cache — persistent cache for fetch results
Full route cache — cached HTML at build or first request

Su	Mo	Tu	We	Th	Fr	Sa

Next.js Patterns

Content

Next.js Patterns

Server vs. Client Components

Data fetching

Caching layers

Next.js Patterns

Content

Next.js Patterns

Server vs. Client Components

Data fetching

Caching layers

Middleware

Production checklist

Agent docs

Codex — Next.js Patterns

Activity

Automation & run history

Latest refresh trace

Research engine

Sources