How can we use the Partial Prerendering (PPR) advanced feature for faster initial loads in Next.js 16?

Partial Prerendering (PPR) in Next.js 16 speeds up initial loads by statically prerendering page shells while streaming dynamic parts via Suspense boundaries. If you need help implementing advanced Next.js performance features, you can hire Next.js developers with experience in modern App Router architectures.

Enable PPR in next.config.ts with experimental.ppr: 'incremental', then opt-in per route by exporting experimental_ppr = true. Wrap dynamic components in <Suspense fallback={...}> so static content loads instantly and dynamic sections stream in.

Code

// next.config.ts
const nextConfig = {
  experimental: {
	ppr: 'incremental',
  },
};

export default nextConfig;


// app/page.tsx
export const experimental_ppr = true;

import { Suspense } from 'react';
import DynamicUser from './DynamicUser';

export default function Page() {
  return (
	<>
  	<h1>Static Shell</h1>

  	<Suspense fallback={<div>Loading...</div>}>
    	<DynamicUser />
  	</Suspense>
	</>
  );
}