Performance Optimization

Next.js includes many performance optimizations out of the box, plus tools for manual optimization when needed. The App Router's Server Component architecture provides the biggest performance win by default.

Automatic Code Splitting

Next.js automatically splits JavaScript bundles per route — navigating to /about only downloads the JavaScript for that page, not the entire app. This happens automatically with no configuration. Shared dependencies (React, utility libraries) are split into common chunks that load once.

Server Components = Zero Client JS

The biggest performance optimization in the App Router: Server Components don't send any JavaScript to the browser. A page with 50 Server Components and 3 Client Components only ships JavaScript for those 3 Client Components. Heavy dependencies used in Server Components (markdown parsers, syntax highlighters, data processing libraries) never appear in the client bundle.

Dynamic Imports (next/dynamic)

For Client Components, next/dynamic provides lazy loading — the component's code downloads only when it's needed:

import dynamic from 'next/dynamic';
 
const HeavyChart = dynamic(() => import('./Chart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false, // Skip server rendering (useful for browser-only libs)
});

Use next/dynamic for: modals, charts, rich text editors, map components, and anything below the fold or triggered by user interaction.

Streaming with Suspense

Streaming sends HTML progressively as Server Components resolve, instead of waiting for the entire page to render:

import { Suspense } from 'react';
 
async function Page() {
  return (
    <div>
      <Header />  {/* Renders immediately */}
      <Suspense fallback={<Skeleton />}>
        <SlowDataSection />  {/* Streams in when ready */}
      </Suspense>
    </div>
  );
}

The instant header + skeleton fallback pattern dramatically improves perceived performance — users see meaningful content immediately while slower data loads.

loading.tsx files create automatic Suspense boundaries for route segments:

// app/dashboard/loading.tsx
export default function Loading() {
  return <DashboardSkeleton />;
}

Partial Prerendering (PPR)

An experimental Next.js feature that combines static and dynamic rendering in one route. The static shell (layout, above-the-fold content) is served instantly from the CDN, while dynamic parts (user-specific data, real-time content) stream in via Suspense boundaries. This gives static-site speed with dynamic-site flexibility.

Bundle Analysis

@next/bundle-analyzer visualizes what's in your JavaScript bundles:

npm install @next/bundle-analyzer
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: true });
module.exports = withBundleAnalyzer(nextConfig);

Look for: unexpectedly large dependencies, duplicate packages, and Client Components that should be Server Components.

optimizePackageImports

For barrel-export libraries (lodash, lucide-react, @mui/icons-material), configure optimizePackageImports in next.config.js to enable tree-shaking:

experimental: {
  optimizePackageImports: ['lucide-react', '@mui/icons-material'],
}

This transforms import { Search } from 'lucide-react' into a direct import from the specific file, avoiding loading the entire icon library.

Key Interview Distinction

Server Components are the biggest performance win — zero client JS for most components. Automatic code splitting per route. next/dynamic lazy-loads heavy Client Components. Streaming with Suspense sends HTML progressively. loading.tsx creates automatic loading states. Bundle analysis identifies optimization opportunities. optimizePackageImports tree-shakes barrel exports.