Partial Prerendering: Cómo Combinar Renderización Estática y Dinámica en Next.js
Estimated reading time: 6 minutes
Key Takeaways
- Partial Prerendering (PPR) permite una mezcla de contenidos estáticos y dinámicos.
- PPR mejora métricas de rendimiento como el Largest Contentful Paint (LCP).
- Se utiliza en Next.js para optimizar el rendering en el borde.
Table of Contents
- Concepto Central y Beneficios
- Funcionamiento Detrás de Escenas
- Implementación en Next.js
- Estado Actual y Futuro
Concepto Central y Beneficios
Partial Prerendering se enfrenta a desafíos que los modelos de renderización tradicionales no han podido superar. Con PPR, puedes prerenderizar secciones estáticas y simultáneamente transmitir contenido dinámico, mejorando así la entrega y la velocidad de la página.
- Cáscaras estáticas servidas en el borde para un tiempo de carga inmediato.
- Relleno de agujeros dinámicos mediante rendering y streaming paralelo.
Funcionamiento Detrás de Escenas
El funcionamiento de PPR se puede dividir en varios pasos:
- En tiempo de compilación, se prerenderiza una cáscara estática para cada ruta.
- El borde sirve la cáscara estática desde la región más cercana.
- una solicitud va al servidor de origen para renderizar partes dinámicas via streaming.
Implementación en Next.js
Implementar PPR en Next.js es sencillo gracias a los componentes de caché en el router. Puedes marcar secciones dinámicas usando la bandera dynamicIO.
- Estática: Header, ProductListing
- Dinámica: Reviews (entra en streaming)
Estado Actual y Futuro
A pesar de estar en fase experimental, PPR ha mostrado avances significativos y está bien posicionada en la arquitectura de rendering actual.
Conclusión
Dale la bienvenida a Partial Prerendering, una innovadora característica que está destinada a transformar el desarrollo web.
Este artículo es del blog de Jalu AI, agencia de automatización con IA para PYMEs de Latinoamérica. El rendimiento web es parte de lo que cuidamos cuando construimos.
