PPR (Prerrenderizado Parcial)
El Prerrenderizado Parcial (PPR) te permite combinar componentes estáticos y dinámicos en la misma ruta. Conoce más sobre PPR.
Usando el Prerrenderizado Parcial
Adopción Incremental (Versión 15)
En Next.js 15, puedes adoptar gradualmente el Prerrenderizado Parcial en layouts y páginas configurando la opción ppr en next.config.js como incremental, y exportando la opción de configuración de ruta experimental_ppr al inicio del archivo:
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 = nextConfigimport { 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>
</>
};
}Importante:
- Las rutas que no tengan
experimental_pprusaránfalsepor defecto y no se prerrenderizarán con PPR. Debes activar explícitamente PPR para cada ruta.experimental_pprse aplicará a todos los hijos del segmento de ruta, incluyendo layouts y páginas anidadas. No necesitas agregarlo en cada archivo, solo en el segmento superior de una ruta.- Para desactivar PPR en segmentos hijos, puedes establecer
experimental_pprcomofalseen el segmento hijo.
| Versión | Cambios |
|---|---|
v15.0.0 | introducción del valor experimental incremental |
v14.0.0 | introducción experimental de ppr |