PPR (Partial Prerendering)

Частичный предварительный рендеринг (PPR) позволяет комбинировать статические и динамические компоненты в одном маршруте. Подробнее о PPR.

Использование частичного предварительного рендеринга

Постепенное внедрение (версия 15)

В Next.js 15 вы можете постепенно внедрять частичный предварительный рендеринг в макетах и страницах, установив параметр ppr в next.config.js в значение incremental и экспортировав опцию конфигурации маршрута experimental_ppr в начале файла:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}

module.exports = nextConfig

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"

export const experimental_ppr = true

export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"

export const experimental_ppr = true

export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

Важно знать:

Маршруты без experimental_ppr по умолчанию будут иметь значение false и не будут использовать PPR. Необходимо явно включать PPR для каждого маршрута.

experimental_ppr применяется ко всем дочерним элементам сегмента маршрута, включая вложенные макеты и страницы. Не нужно добавлять его в каждый файл, только в верхний сегмент маршрута.

Чтобы отключить PPR для дочерних сегментов, можно установить experimental_ppr в false в дочернем сегменте.

Версия	Изменения
`v15.0.0`	добавлено экспериментальное значение `incremental`
`v14.0.0`	добавлен экспериментальный параметр `ppr`

Partial Prerendering

Узнайте, как сочетать преимущества статического и динамического рендеринга с помощью частичного предварительного рендеринга (PPR).

Использование частичного предварительного рендеринга

Постепенное внедрение (версия 15)

Partial Prerendering

On this page