Code Splitting Strategies
Don't make your users pay for what they don't use. Code Splitting allows you to break your app into smaller bundles that load on-demand, dramatically improving performance.
Strategy Details
Next.js handles route-based code splitting out of the box. Use `next/dynamic` for manual, component-level optimizations.
Hydration Logic
Initialized as an empty shell. React takes over complete control after the JS bundle loads.
The Burden of JavaScript
The average modern web app sends over 400kb of compressed JS. Without code splitting, browsers struggle to parse and execute this script, leading to poor Core Web Vitals (LCP, INP).
1. Route-Based Splitting
Automatic physical partitioning by Next.js App Router.
Route-Based Splitting
Next.js automatically splits your application into small, independent bundles per route. When you visit /ssr, you only download the code needed for that page.
The Result: Faster Time to Interactive (TTI) because the browser executes less JavaScript. No more loading the entire app's logic for a single landing page.
2. Component-Level
Manual optimization for heavy interaction islands.
Component-Level (Dynamic)
Use next/dynamic to defer loading heavy components (like charts, editors, or maps) until they are actually needed.
import dynamic from 'next/dynamic';
const HeavyChart = dynamic(
() => import('./HeavyChart'),
{
loading: () => <Skeleton />,
ssr: false
}
);// This bundle is only requested
// when the component renders.
Currently 0kb loaded on client.
Bundle Comparison
Visualizing the impact on real-world mobile devices.
The Monolith
Loading everything at once in a single main.js bundle.
- High initial latency
- Wasteful bandwidth
- Slow parsing time
Optimized App
Bundles dynamically partitioned by routes and usage.
- Instant first paint
- Incremental loading
- Low CPU usage
Pro Tip: Tree Shaking
Next.js works together with Webpack/Turbopack to perform "Tree Shaking"—removing dead code that you import but never call. This further reduces the size of your split bundles.