¿Qué es el prerenderizado?

¿Qué es el prerenderizado?

Prerenderizar significa generar el HTML final de una página antes de la petición, normalmente durante la compilación, de modo que el navegador o el rastreador reciba un marcado listo para leer en lugar de una cáscara vacía de JavaScript. Una aplicación de página única gana así un primer pintado más rápido y contenido indexable sin renderizar en cada petición. En esta entrada la palabra se refiere a ese sentido de tiempo de compilación; es muy cercano a la generación de sitios estáticos y se sitúa entre el renderizado en el cliente y el renderizado en el servidor. Todo el espectro está en renderizado.

Cómo funciona

Un paso de compilación ejecuta su aplicación para una lista de rutas, espera a que aparezca el contenido y guarda el HTML resultante de cada URL. Una CDN sirve esos archivos. En el navegador la página se pinta al instante y después JavaScript toma el control mediante la hidratación. Si el contenido de una ruta cambia a menudo, la regeneración estática incremental reconstruye las páginas tras un tiempo fijado o bajo demanda, en lugar de en cada despliegue.

Variantes y cuándo usarlas

• Prerenderizado en compilación. Un archivo HTML por ruta, generado durante la compilación. Ideal para páginas de marketing, blogs y documentación. Límite: los cambios de contenido requieren recompilar.
• Regeneración. Las páginas son estáticas pero se refrescan tras un plazo o bajo demanda. Ideal para catálogos y artículos que cambian de vez en cuando.
• Prerenderizado dinámico. Un servicio renderiza páginas para los rastreadores mientras las personas reciben la aplicación normal. Google califica el renderizado dinámico de solución provisional, no recomendada, y aconseja en su lugar renderizado en el servidor, renderizado estático o hidratación. En general no lo considera cloaking mientras rastreadores y usuarios reciban contenido similar.

El otro significado: prerenderizado en el navegador

En el navegador, una regla prerender de la Speculation Rules API indica a un navegador compatible que cargue y ejecute en una pestaña oculta la página siguiente más probable, para que la navegación parezca instantánea. Es otra técnica con otro objetivo, descrita en prefetch de recursos y carga especulativa. Según MDN, por defecto es del mismo origen y no es segura para páginas cuyas acciones de servidor tienen efectos secundarios, como cerrar sesión o añadir al carrito.

Por qué importa para el rendimiento y el SEO

• Primer pintado más rápido. El navegador recibe un marcado que puede pintar sin esperar a que JavaScript cargue y renderice el contenido, lo que suele ayudar al Largest Contentful Paint.
• Contenido rastreable. Los buscadores pueden leer el contenido desde la primera respuesta HTML.
• Barato de servir. Los archivos estáticos se cachean bien en una CDN y cuestan poco por petición.

Errores comunes

• Incluir datos personales en el HTML. Nombres, carritos y preferencias van en el código del cliente tras la carga, nunca en una página compartida por todos.
• Páginas obsoletas. Un tiempo de caché largo o una recompilación que falta deja al usuario con contenido viejo.
• Desajustes de hidratación. Fechas, ids aleatorios o formatos de idioma que difieren entre la compilación y el navegador provocan avisos y nuevos renderizados.
• Metadatos ausentes. Título, descripción, canonical y datos estructurados deben estar también en el HTML prerenderizado.
• Prerenderizar páginas con sesión. Use renderizado de servidor o de cliente para todo lo que varíe por usuario.

Cómo probar páginas prerenderizadas

Compruebe la página como la recibe el usuario: a través de su CDN, desde varias regiones y con la caché activa. La monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse programadas y sigue el Largest Contentful Paint y otras Core Web Vitals a lo largo del tiempo. Si regenera páginas bajo demanda, una prueba de carga muestra si ese punto aguanta con tráfico. Más en pruebas de carga de aplicaciones de página única.

Preguntas frecuentes: prerenderizado

¿Prerenderizar es lo mismo que SSR?

No. El SSR renderiza en cada petición, mientras que el prerenderizado renderiza antes, en la compilación o según un calendario. Ambos envían HTML al navegador, pero cambian la frescura y la caché.

¿Es lo mismo que la generación de sitios estáticos?

El prerenderizado en compilación y la generación de sitios estáticos son casi lo mismo. El término también se usa para servicios dinámicos y para la función del navegador, así que compruebe a cuál se refiere cada fuente.

¿Google sigue necesitando prerenderizado?

Google puede ejecutar JavaScript, pero enviar HTML terminado es más sencillo y fiable, y otros rastreadores pueden manejar peor JavaScript. Google recomienda renderizado de servidor o estático frente al renderizado dinámico para proyectos nuevos.

¿Puedo prerenderizar páginas para usuarios con sesión?

No. El contenido que cambia por usuario no debe ir en HTML compartido. Renderícelo en el servidor por petición o en el cliente tras la carga.