¿Qué es el renderizado progresivo?

El renderizado progresivo es una técnica de optimización de la velocidad de carga y visualización de páginas web, en la que el contenido se carga y muestra de manera progresiva, en lugar de hacerlo todo de una vez.

Sus principales ventajas:

Una renderización más rápida del contenido significativo inicial (First Meaningful Paint).
Mejor percepción de la velocidad de carga por parte del usuario.
Reducción del tiempo hasta la interactividad (Time to Interactive).

Las principales técnicas de renderizado progresivo incluyen:

Carga diferida (Lazy Loading): Retrasar la carga de recursos no esenciales (como imágenes o videos) hasta que sean necesarios para el usuario (hasta que desplaza la página hasta ellos).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Ejemplo de imagen" loading="lazy">
```

Renderizado en el lado del servidor (Server-Side Rendering - SSR): Generar la página HTML en el servidor y enviar el contenido ya renderizado al navegador.

// Ejemplo de uso de un framework para SSR (por ejemplo, Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Obtener datos en el servidor
//   const data = await fetchData();
//   return {
//     props: { data }, // Pasar datos al componente
//   }
// }
//
// function MyPage({ data }) {
//   // Renderizar componente con datos
//   return <div>{/* ... */}</div>
// }

Renderizado en el lado del cliente (Client-Side Rendering - CSR) con hidratación: El navegador recibe HTML y JavaScript mínimos. Luego, JavaScript carga los datos y renderiza completamente la página en el navegador. La hidratación es el proceso de adjuntar manejadores de eventos al contenido ya renderizado por SSR en el cliente.

Transmisión en streaming de HTML (Streaming HTML): Enviar HTML en partes a medida que se genera en el servidor, permitiendo que el navegador comience a analizar y renderizar antes de que se cargue completamente el documento.

<!-- Ejemplo de transmisión en streaming hipotética -->
<html>
  <head>
    <title>Página en streaming</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Parte del HTML enviada primero -->
    <h1>Título</h1>
    <script src="script.js" async></script>
    <!-- El resto del HTML puede enviarse más tarde -->
  </body>
</html>

CSS crítico / CSS en línea (Critical CSS / Inline Critical CSS): Incluir en línea estilos CSS necesarios para mostrar la parte visible de la página (Above the Fold), para acelerar el renderizado inicial. Los demás estilos se cargan de forma asíncrona.

Técnica	Descripción	Ventajas	Desventajas
Carga diferida	Carga retrasada de recursos fuera del área visible	Carga rápida del contenido visible	Puede requerir JavaScript para su implementación
SSR	Renderizado en el servidor, envío del HTML listo	Renderizado rápido del contenido inicial, amigable con SEO	Aumenta la carga en el servidor
CSR con hidratación	Renderizado inicial en el cliente con hidratación posterior del contenido SSR	Aplicaciones dinámicas	Carga prolongada y menos interactividad sin SSR
Transmisión en streaming de HTML	Envío de HTML en partes	Inicio rápido del análisis	Depende de la implementación del servidor
CSS crítico	Incluir estilos en línea para la parte visible	Renderizado rápido de la parte visible	Requiere herramientas para extraer CSS crítico

El renderizado progresivo es una combinación de estas y otras técnicas, orientada a mejorar la experiencia del usuario mediante la aceleración del renderizado de la página web.