Server Component (Partial Prerendering)

Partial Prerendering (PPR) combines static and dynamic components together in the same route.

The <Suspense> tags are used to wrap the dynamic components.

During the build, Next.js prerenders as much of the route as possible. Assuming neither dynamic funtion nor uncached fetching is detected, the components outside the <Suspense> tags are rendered statically at build time, along with the <Suspense> fallback components.

For Next.js 15, to designate the use of PPR for a route, export the experimental_ppr route config option at the top of the file.

Also remember to set the experimental ppr option in the next.config.ts file.

experimental_ppr will apply to all children of the route segment, including nested layouts and pages. You don't have to add it to every file, only the top segment of a route. To disable PPR for children segments, you can set experimental_ppr to false in the child segment.

ppr.ts:

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, StaticFallbackComponent } from "@/app/ui"
 
export const experimental_ppr = true;    // not needed for Next.js 14
 
export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<StaticFallbackComponent />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, StaticFallbackComponent } from "@/app/ui"
 
export const experimental_ppr = true;    // not needed for Next.js 14
 
export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<StaticFallbackComponent />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

next.config.ts:

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
    // ppr: true,     // Next.js 14
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
    // ppr: true,     // Next.js 14
  },
}
 
export default nextConfig

MENU

Server Component (Partial Prerendering)