Next.js 15 App Router: The Complete Performance Guide

Next.js 15 is the most significant release since the App Router launched in Next.js 13. Turbopack is now the default bundler, Server Actions are stable, and Partial Prerendering (PPR) is available in experimental mode.

Turbopack: What Changed

Turbopack replaces webpack as the default development bundler, delivering 76% faster cold starts and 96% faster HMR on large codebases. Your existing webpack config won't carry over, but most popular webpack plugins have Turbopack equivalents.

Server Components vs. Client Components

The mental model is still the most confusing part of App Router for teams migrating from Pages Router. The rule is simple: if it fetches data, it's a Server Component. If it has user interaction (onClick, onChange, useState), it must be a Client Component.

• Server Components reduce JavaScript bundle size — they never ship component code to the browser
• Use Suspense boundaries to stream HTML and avoid waterfall loading states
• Pass Server Component output as children props to Client Components to avoid prop drilling

Partial Prerendering

PPR is the biggest architectural shift: you can now have a static shell (rendered at build time) with dynamic holes (rendered at request time) in the same route. Wrap dynamic sections in Suspense with a fallback, and PPR will serve the static shell instantly from the CDN while streaming dynamic content from the origin.

Core Web Vitals Checklist

Always set explicit width and height on images to prevent layout shift. Use next/font to eliminate FOUT entirely. Lazy-load below-fold images. Audit your Client Component boundaries — every unnecessary "use client" is JavaScript you're sending to the browser.