Saltearse al contenido
Astro Astro

Modos de renderizado

Tu código de proyecto de Astro debe ser renderizado a HTML para poder ser mostrado en la web.

Las páginas de Astro, las rutas y los endpoints de la API pueden ser pre-renderizados en el momento de la compilación o renderizados bajo demanda por un servidor cuando se solicita una ruta. Con las islas de Astro, también puedes incluir algo de renderizado en el lado del cliente cuando sea necesario.

En Astro, la mayor parte del procesamiento se realiza en el servidor, en lugar de en el navegador. Esto generalmente hace que tu sitio o aplicación sea más rápido que el renderizado del lado del cliente cuando se ve en dispositivos menos potentes o en conexiones a Internet más lentas. El HTML renderizado en el servidor es rápido, amigable para el SEO y accesible por defecto.

Modos de output del servidor

Sección titulada Modos de output del servidor

Puedes configurar cómo se renderizan tus páginas en tu configuración del output.

Pre-renderizado

Sección titulada Pre-renderizado

El modo de renderizado predeterminado es output: 'static', el cual crea el HTML de todas las rutas de tu página en el momento de la compilación.

En este modo, todo tu sitio será pre-renderizado y el servidor tendrá todas las páginas construidas de antemano y listas para enviar al navegador. El mismo documento HTML se envía al navegador para cada visitante, y se requiere una reconstrucción completa del sitio para actualizar el contenido de la página. Este método también se conoce como generación de sitios estáticos (SSG).

Por defecto, todos los proyectos de Astro están configurados para ser pre-renderizados en el momento de la compilación (estáticamente generados) para proporcionar la experiencia de navegador más ligera. El navegador no necesita esperar a que se construya ningún HTML porque el servidor no necesita generar ninguna página bajo demanda. Tu sitio no depende del rendimiento de una fuente de datos de backend, y una vez construido, permanecerá disponible para los visitantes como un sitio estático siempre y cuando tu servidor esté funcionando.

Los sitios estáticos pueden incluir islas de Astro para componentes UI interactivos (¡o incluso aplicaciones completas incrustadas renderizadas en el lado del cliente!) escritos en el framework UI que elijas en una página estática pre-renderizada.

La API de View Transitions de Astro también está disponible en el modo static para la animación y la persistencia del estado a través de la navegación de la página. Los sitios estáticos también pueden utilizar middleware para interceptar y transformar los datos de respuesta de una solicitud.

Renderizado bajo demanda

Sección titulada Renderizado bajo demanda

Las otras dos opciones de salida de Astro se pueden configurar para habilitar el renderizado bajo demanda de algunas o todas tus páginas, rutas o endpoints de API:

  • output: 'server' para sitios altamente dinámicos con la mayoría o todas las rutas bajo demanda.
  • output: 'hybrid' para sitios principalmente estáticos con algunas rutas bajo demanda.

Desde que son generadas por visita, estas rutas pueden ser personalizadas para cada visitante. Por ejemplo, una página renderizada bajo demanda puede mostrar a un usuario registrado su información de cuenta o mostrar datos actualizados recientemente sin requerir una reconstrucción completa del sitio. El renderizado bajo demanda en el servidor en el momento de la solicitud también se conoce como renderizado del lado del servidor (SSR).

Considera habilitar el modo server o hybrid en tu proyecto de Astro si necesitas lo siguiente:

  • Enpoints de API: Crea páginas específicas que funcionen como endpoints de API para tareas como el acceso a la base de datos, la autenticación y la autorización, manteniendo los datos sensibles ocultos del cliente.

  • Páginas protegidas: Restringe el acceso a una página basándose en los privilegios del usuario, manejando el acceso del usuario en el servidor.

  • Contenido frecuentemente cambiante: Genera páginas individuales sin requerir una reconstrucción estática de tu sitio. Esto es útil cuando el contenido de una página se actualiza con frecuencia, por ejemplo, mostrando datos de una API llamada dinámicamente con fetch().

Ambos modos de salida server e hybrid te permiten incluir islas de Astro para la interactividad (¡o incluso aplicaciones completas incrustadas renderizadas en el lado del cliente!) en tu elección de frameworks UI. Con middleware y la API de View Transitions de Astro para animaciones y preservación del estado a través de las navegaciones de ruta, incluso las aplicaciones altamente interactivas son posibles.