Web Development7 min read

Next.js Advanced

Master Next.js App Router - React Server Components, streaming, Server Actions, route handlers, caching strategies, and edge deployment.

Next.jsReactApp RouterServer ComponentsPerformance

skill: Next.js Advanced category: Web Development tags: [Next.js, React, App Router, Server Components, Performance] readingTime: 7

The App Router is not a breaking change to Pages Router - it's a fundamentally different mental model where components default to server-side rendering. React Server Components reduce JavaScript sent to the client dramatically. Use RSC for data fetching; use Client Components only for interactivity.

Workflow

Understand React Server ComponentsRSC runs on the server - no bundle size impact, direct database access, no useEffect for data fetching. Client Components handle interactivity.
Stream with SuspenseSuspense shows a fallback while a slow component loads - users see fast content first instead of waiting for the slowest piece.
Mutate data with Server ActionsServer Actions let forms call server-side functions directly - no separate API route needed, with automatic CSRF protection.
Optimize caching strategiesNext.js caches aggressively by default. Understanding the four cache layers prevents serving stale data.
Secure routes with MiddlewareMiddleware runs at the edge before the request reaches the page - redirect unauthenticated users without loading React.

Output Format

Next.js App Router: RSC for data fetching, Suspense for streaming, Server Actions for mutations, tag-based cache revalidation, and middleware for auth.

app/
  layout.tsx        # root layout
  page.tsx          # server component (async, db access)
  loading.tsx       # Suspense fallback
components/
  Button.tsx        # 'use client' - interactive
actions/
  users.ts          # 'use server' - server actions

Examples

Input

Output

Edge Cases & Gotchas

Passing Server data to Client Components - Server Components can't pass non-serializable values (functions, classes) to Client Components - only plain JSON-serializable data.
Server Action security - Server Actions are publicly callable HTTP endpoints. Always validate authorization inside the action - never trust the caller is who they claim.
Cache invalidation in development - Next.js caching behaves differently in development (no caching) vs. production. Test caching behavior with npm run build && npm start.
Edge runtime limitations - Edge middleware has no Node.js APIs (no fs, no native modules). Use the nodejs runtime for middleware that needs Node.js features.

When to Break These Rules

Use Remix instead of Next.js for apps where form-first, progressive enhancement, and web-standards-first philosophy matter more than RSC optimization.
Use a plain React SPA (Vite) for authenticated apps with no SEO requirements - App Router complexity is overkill when you don't need SSR.

Reference Files

https://nextjs.org/docs/app
https://react.dev/reference/rsc/server-components