Saltearse al contenido

Renderizado bajo demanda

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

Por defecto, las páginas, rutas y endpoints de API en Astro se pre-renderizan en el momento de la compilación como páginas estáticas. Sin embargo, puedes optar por renderizar algunas o todas tus rutas bajo demanda mediante un servidor cuando se solicite una ruta.

Las páginas y rutas renderizadas bajo demanda se generan en cada visita, y pueden personalizarse para cada usuario. Por ejemplo, una página renderizada bajo demanda puede mostrar a un usuario autenticado la información de su cuenta o mostrar datos actualizados sin necesidad de de reconstruir todo el 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).

Adaptadores de servidor

Sección titulada Adaptadores de servidor

Para renderizar cualquier página bajo demanda, necesitas agregar un adaptador. Cada adaptador permite que Astro genere un script que ejecuta tu proyecto en un entorno específico: el entorno que ejecuta código en el servidor para generar páginas cuando se solicitan (por ejemplo, Netlify, Cloudflare).

También puedes agregar un adaptador incluso si tu sitio es completamente estático y no estás renderizando páginas bajo demanda. Por ejemplo, el adaptador de Netlify habilita la CDN de imágenes de Netlify, y las islas de servidor (EN) requieren un adaptador instalado para usar server:defer en un componente.

Adaptadores SSR

Astro mantiene adaptadores oficiales para Node.js, Netlify, Vercel, y Cloudflare. Puedes encontrar tanto adaptadores oficiales como de la comunidad en nuestro directorio de integraciones. Elige el que corresponda a tu entorno de despliegue.

Agrega un adaptador

Sección titulada Agrega un adaptador

Puedes agregar cualquiera de las integraciones oficiales de adaptadores mantenidas por Astro con el siguiente comando astro add. Esto instalará el adaptador y realizará los cambios correspondientes en tu archivo astro.config.mjs en un solo paso.

Por ejemplo, para instalar el adaptador de Netlify, ejecuta:

Ventana de terminal
npx astro add netlify

También puedes agregar un adaptador manualmente instalando el paquete de NPM (por ejemplo, @astrojs/netlify) y actualizando tu archivo astro.config.mjs por tu cuenta.

Ten en cuenta que los diferentes adaptadores pueden tener configuraciones distintas. Lee la documentación de cada adaptador y aplica las opciones de configuración necesarias en astro.config.mjs.

Habilitar el renderizado bajo demanda

Sección titulada Habilitar el renderizado bajo demanda

Por defecto, todo tu sitio Astro será prerenderizado, y se enviarán páginas HTML estáticas al navegador. Sin embargo, puedes excluir del prerenderizado aquellas rutas que requieran renderizado en el servidor, por ejemplo, una página que verifique cookies y muestre contenido personalizado.

Primero, agrega una integración de adaptador para tu entorno de servidor para habilitar el renderizado bajo demanda en tu proyecto Astro.

Luego, añade export const prerender = false en la parte superior de la página o endpoint que desea renderizar bajo demanda. El resto de tu sitio seguirá siendo estático:

src/pages/page-rendered-on-demand.astro
---
export const prerender = false
---
<html>
<!--
¡Este contenido se renderizará en el servidor bajo demanda!
Solo agrega una integración de adaptador para un entorno de servidor.
¡Todas las demás páginas se generan estáticamente en el momento de la compilación!
-->
<html>

El siguiente ejemplo muestra cómo excluirse del prerenderizado para mostrar un número aleatorio cada vez que se accede al endpoint:

src/pages/randomnumber.js
export const prerender = false;


export async function GET() {
  let number = Math.random();
  return new Response(
    JSON.stringify({
      number,
      message: `Aquí tienes un número aleatorio: ${number}`,
    }),
  );
}

Modo 'server'

Sección titulada Modo &#39;server&#39;

Para una aplicación altamente dinámica, después de agregar un adaptador, puedes configurar la salida de compilación con output: 'server' para renderizar todas tus páginas en el servidor por defecto. Esto equivale a excluir el prerenderizado en cada página.

Luego, si es necesario, puedes optar por prerenderizar páginas individuales que no requieran ejecución en el servidor, como una página de política de privacidad o una página “Acerca de”.

src/pages/about-my-app.astro
---
export const prerender = true
---
<html>
<!--
`output: 'server' `está configurado, ¡pero esta página es estática!
¡El resto de mi sitio se renderiza bajo demanda!
-->
<html>

Agrega export const prerender = true a cualquier página o ruta para prerenderizar una página estática o endpoint:

src/pages/myendpoint.js
export const prerender = true;


export async function GET() {
  return new Response(
    JSON.stringify({
      message: `Este es mi endpoint estático`,
    }),
  );
}
Consulta más sobre la configuración output en la referencia de configuración.

Funciones de renderizado bajo demanda

Sección titulada Funciones de renderizado bajo demanda

Transmisión de HTML

Sección titulada Transmisión de HTML

Con la transmisión de HTML, un documento se divide en fragmentos que se envían a través de la red en un orden específico y se renderizan en la página en ese mismo orden. Astro utiliza la transmisión de HTML en el renderizado bajo demanda para enviar cada componente al navegador a medida que se va renderizando. Esto garantiza que el usuario vea el HTML lo más rápido posible. Sin embargo, las condiciones de la red pueden hacer que los documentos grandes se descarguen lentamente, y la espera por la obtención de datos puede bloquear el renderizado de la página.

Receta relacionada: Utilizando transmisión para mejorar el rendimiento de la página

Cookies

Sección titulada Cookies

Una página o un endpoint de API renderizado bajo demanda puede verificar, establecer, obtener y eliminar cookies.

El siguiente ejemplo actualiza el valor de una cookie para un contador de visitas a la página:

src/pages/index.astro
---
export const prerender = false; // No es necesario en el modo 'server'


let counter = 0


if (Astro.cookies.has('counter')) {
  const cookie = Astro.cookies.get('counter')
  const value = cookie?.number()
  if (value !== undefined && !isNaN(value)) counter = value + 1
}


Astro.cookies.set('counter', String(counter))
---
<html>
  <h1>Contador = {counter}</h1>
</html>
Consulta más detalles sobre Astro.cookies y el tipo AstroCookie en la referencia de la API.

Response

Sección titulada Response

Astro.response es un objeto estándar de ResponseInit. Se puede utilizar para establecer el estado y las cabeceras de la respuesta.

El siguiente ejemplo establece un estado de respuesta y un texto de estado para una página de producto cuando el producto no existe:

src/pages/product/[id].astro
---
export const prerender = false; // No es necesario en el modo 'server'


import { getProduct } from '../api';


const product = await getProduct(Astro.params.id);


// No se encontró ningún producto
if (!product) {
  Astro.response.status = 404;
  Astro.response.statusText = 'Not found';
}
---
<html>
  <!-- Página aquí... -->
</html>

Astro.response.headers

Sección titulada Astro.response.headers

Puedes establecer cabeceras utilizando el objeto Astro.response.headers:

src/pages/index.astro
---
export const prerender = false; // No es necesario en el modo 'server'


Astro.response.headers.set('Cache-Control', 'public, max-age=3600');
---
<html>
  <!-- Página aquí... -->
</html>

Devuelve un objeto Response

Sección titulada Devuelve un objeto Response

También puedes devolver un objeto Response directamente desde cualquier página utilizando la renderización bajo demanda, ya sea manualmente o con Astro.redirect.

El siguiente ejemplo busca un ID en la base de datos en una página dinámica y, o bien devuelve un error 404 si el producto no existe, o redirige al usuario a otra página si el producto ya no está disponible, o muestra el producto:

src/pages/product/[id].astro
---
export const prerender = false; // No es necesario en el modo 'server'


import { getProduct } from '../api';


const product = await getProduct(Astro.params.id);


// No se encontró ningún producto
if (!product) {
  return new Response(null, {
    status: 404,
    statusText: 'Not found'
  });
}


// El producto ya no está disponible
if (!product.isAvailable) {
  return Astro.redirect("/products", 301);
}
---
<html>
  <!-- Página aquí... -->
</html>

Request

Sección titulada Request

Astro.request es un objeto Request estándar. Se puede usar para obtener la url, los headers, el method, e incluso el cuerpo de la petición.

Puedes acceder a información adicional de este objeto en las páginas que no se generan de forma estática.

Astro.request.headers

Sección titulada Astro.request.headers

Las cabeceras de la solicitud están disponibles en Astro.request.headers. Esto funciona como las cabeceras de la solicitud en el navegador. Request.headers. Es un objeto Headers donde puedes recuperar cabeceras como la cookie.

src/pages/index.astro
---
export const prerender = false; // No es necesario en el modo 'server'


const cookie = Astro.request.headers.get('cookie');
// ...
---
<html>
  <!-- Página aquí... -->
</html>

Astro.request.method

Sección titulada Astro.request.method

El método HTTP utilizado en la solicitud está disponible como Astro.request.method. Esto funciona como Request.method en el navegador. Devuelve la representación en cadena del método HTTP utilizado en la solicitud.

src/pages/index.astro
---
export const prerender = false; // No es necesario en el modo 'server'


console.log(Astro.request.method) // GET (cuando se navega a esta ruta en el navegador)
---
Consulta más detalles sobre Astro.request en la referencia de la API.

Endpoints del Servidor

Sección titulada Endpoints del Servidor

Un endpoint del servidor, también conocido como una ruta API, es una función especial exportada desde un archivo .js o .ts dentro de la carpeta src/pages/. Como una potente característica del renderizado en el servidor bajo demanda, las rutas de API pueden ejecutar código de forma segura en el servidor.

La función recibe un contexto de endpoint y devuelve una Response.

Para obtener más información, consulta nuestra Guía de Endpoints.

Contribuir Comunidad Patrocinador