Pre-renderizado parcial (Partial Prerendering)

Hasta ahora, has aprendido sobre renderizado estático y dinámico, y cómo transmitir contenido dinámico que depende de datos. En este capítulo, aprendamos cómo combinar renderizado estático, dinámico y streaming en la misma ruta con el Pre-renderizado parcial (PPR).

El Pre-renderizado parcial es una característica experimental introducida en Next.js 14. El contenido de esta página puede actualizarse a medida que la función avanza en estabilidad. PPR solo está disponible en las versiones canarias de Next.js (next@canary), no en la versión estable de Next.js. Aún no recomendamos usar Pre-renderizado parcial en producción.

Para instalar la versión canaria de Next.js, ejecuta:

pnpm install next@canary

Rutas estáticas vs. dinámicas

Para la mayoría de las aplicaciones web construidas hoy, eliges entre renderizado estático y dinámico para toda tu aplicación, o para una ruta específica. Y en Next.js, si llamas a una función dinámica en una ruta (como consultar tu base de datos), la ruta completa se vuelve dinámica.

Sin embargo, la mayoría de las rutas no son completamente estáticas o dinámicas. Por ejemplo, considera un sitio de comercio electrónico. Es posible que desees renderizar estáticamente la mayor parte de la página de información del producto, pero podrías querer obtener el carrito del usuario y los productos recomendados dinámicamente, lo que te permite mostrar contenido personalizado a tus usuarios.

Volviendo a tu página de panel de control, ¿qué componentes considerarías estáticos vs. dinámicos?

Cuando estés listo, haz clic en el botón a continuación para ver cómo dividiríamos la ruta del panel de control:

¿Qué es el Pre-renderizado parcial?

Next.js 14 introdujo una versión experimental del Pre-renderizado parcial – un nuevo modelo de renderizado que te permite combinar los beneficios del renderizado estático y dinámico en la misma ruta. Por ejemplo:

Cuando un usuario visita una ruta:

• Se sirve un shell de ruta estática que incluye la barra de navegación y la información del producto, asegurando una carga inicial rápida.
• El shell deja espacios donde el contenido dinámico como el carrito y los productos recomendados se cargarán de forma asíncrona.
• Los espacios asíncronos se transmiten en paralelo, reduciendo el tiempo total de carga de la página.

¿Cómo funciona el Pre-renderizado parcial?

El Pre-renderizado parcial utiliza Suspense de React (que aprendiste en el capítulo anterior) para diferir el renderizado de partes de tu aplicación hasta que se cumpla alguna condición (por ejemplo, se carguen los datos).

El fallback de Suspense se incrusta en el archivo HTML inicial junto con el contenido estático. En tiempo de compilación (o durante la revalidación), el contenido estático se pre-renderiza para crear un shell estático. El renderizado del contenido dinámico se pospone hasta que el usuario solicite la ruta.

Envolver un componente en Suspense no hace que el componente en sí sea dinámico, sino que Suspense se utiliza como un límite entre tu código estático y dinámico.

Veamos cómo puedes implementar PPR en tu ruta de panel de control.

Implementando el Pre-renderizado parcial

Habilita PPR para tu aplicación Next.js agregando la opción ppr a tu archivo next.config.ts:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental'
  }
};
 
export default nextConfig;

El valor 'incremental' te permite adoptar PPR para rutas específicas.

Luego, agrega la opción de segmento experimental_ppr al layout de tu panel de control:

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;
 
// ...

Eso es todo. Puede que no veas una diferencia en tu aplicación en desarrollo, pero deberías notar una mejora en el rendimiento en producción. Next.js pre-renderizará las partes estáticas de tu ruta y diferirá las partes dinámicas hasta que el usuario las solicite.

Lo bueno del Pre-renderizado parcial es que no necesitas cambiar tu código para usarlo. Siempre que uses Suspense para envolver las partes dinámicas de tu ruta, Next.js sabrá qué partes de tu ruta son estáticas y cuáles son dinámicas.

Creemos que PPR tiene el potencial de convertirse en el modelo de renderizado predeterminado para aplicaciones web, combinando lo mejor del renderizado de sitios estáticos y dinámicos. Sin embargo, aún es experimental. Esperamos estabilizarlo en el futuro y convertirlo en la forma predeterminada de construir con Next.js.

Ahora puedes revertir estos cambios y pasar al siguiente capítulo.

Resumen

Para recapitular, has hecho algunas cosas para optimizar la obtención de datos en tu aplicación hasta ahora:

1. Creaste una base de datos en la misma región que tu código de aplicación para reducir la latencia entre tu servidor y la base de datos.
2. Obtuviste datos en el servidor con Componentes de Servidor de React. Esto te permite mantener las obtenciones de datos costosas y la lógica en el servidor, reduce el paquete de JavaScript del lado del cliente y evita que tus secretos de base de datos se expongan al cliente.
3. Usaste SQL para obtener solo los datos que necesitabas, reduciendo la cantidad de datos transferidos por cada solicitud y la cantidad de JavaScript necesaria para transformar los datos en memoria.
4. Paralelizaste la obtención de datos con JavaScript, donde tenía sentido hacerlo.
5. Implementaste Streaming para evitar que las solicitudes de datos lentas bloqueen toda tu página, y permitir que el usuario comience a interactuar con la interfaz sin esperar a que todo se cargue.
6. Moviste la obtención de datos a los componentes que los necesitan, aislando así qué partes de tus rutas deben ser dinámicas.

En el próximo capítulo, veremos dos patrones comunes que podrías necesitar implementar al obtener datos: búsqueda y paginación.