Renderizado bajo demanda

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

Por defecto, las páginas, rutas y endpoints de API de Astro serán pre-renderizados en el momento del build como páginas estáticas. Sin embargo, puedes elegir renderizar algunas o todas tus rutas bajo demanda por un servidor cuando se solicite una ruta.

Las páginas y rutas renderizadas bajo demanda se generan por visita, y pueden personalizarse para cada visitante. Por ejemplo, una página renderizada bajo demanda puede mostrar a un usuario conectado su información de cuenta o mostrar datos recién actualizados sin requerir una reconstrucción completa del sitio.

El renderizado bajo demanda en el servidor en el momento de la petición también se conoce como server-side rendering (SSR).

Adaptadores de servidor

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

También puedes querer añadir un adaptador incluso si tu sitio es completamente estático y no estás renderizando ninguna página bajo demanda. Por ejemplo, el adaptador de Netlify habilita el Image CDN de Netlify, y las server islands requieren que un adaptador esté instalado para usar server:defer en un componente.

Adaptadores

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.

Añadir un adaptador

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

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

npx astro add netlify

pnpm astro add netlify

yarn astro add netlify

También puedes añadir un adaptador manualmente instalando el paquete NPM (p. ej. @astrojs/netlify) y actualizando astro.config.mjs tú mismo.

Ten en cuenta que diferentes adaptadores pueden tener diferentes ajustes de configuración. Lee la documentación de cada adaptador, y aplica cualquier opción de configuración necesaria a tu adaptador elegido en astro.config.mjs

Habilitar el renderizado bajo demanda

Por defecto, todo tu sitio de Astro será pre-renderizado, y se enviarán páginas HTML estáticas al navegador. Sin embargo, puedes optar por no pre-renderizar en cualquier ruta que requiera renderizado del servidor, por ejemplo, una página que comprueba cookies y muestra contenido personalizado.

Primero, añade una integración de adaptador para tu runtime de servidor para habilitar el renderizado de servidor bajo demanda en tu proyecto de Astro.

Luego, añade export const prerender = false al principio de la página o endpoint individual que quieres renderizar bajo demanda. El resto de tu sitio permanecerá como un sitio estático:

---
export const prerender = false
---
<html>
<!--
This content will be server-rendered on demand!
Just add an adapter integration for a server runtime!
All other pages are statically-generated at build time!
-->
</html>

El siguiente ejemplo muestra cómo optar por no pre-renderizar para mostrar un número aleatorio cada vez que se accede al endpoint:

export const prerender = false;

export async function GET() {
  let number = Math.random();
  return new Response(
    JSON.stringify({
      number,
      message: `Here's a random number: ${number}`,
    }),
  );
}

modo `'server'`

Para una app altamente dinámica, después de añadir un adaptador, puedes establecer la configuración de salida del build a output: 'server' para renderizar en el servidor todas tus páginas por defecto. Esto es equivalente a optar por no pre-renderizar en cada página.

Luego, si es necesario, puedes elegir pre-renderizar cualquier página individual que no requiera un servidor para ejecutarse, como una página de política de privacidad o sobre.

---
export const prerender = true
---
<html>
<!--
`output: 'server'` is configured, but this page is static!
The rest of my site is rendered on demand!
-->
</html>

Añade export const prerender = true a cualquier página o ruta para pre-renderizar una página o endpoint estático:

export const prerender = true;

export async function GET() {
  return new Response(
    JSON.stringify({
      message: `This is my static endpoint`,
    }),
  );
}

Consulta más sobre el ajuste output en la referencia de configuración.

Características del renderizado bajo demanda

HTML streaming

Con HTML streaming, un documento se divide en fragmentos, se envía por la red en orden, y se renderiza en la página en ese orden. Astro usa HTML streaming en el renderizado bajo demanda para enviar cada componente al navegador a medida que los renderiza. Esto asegura que el usuario vea tu HTML lo más rápido posible, aunque las condiciones de red pueden causar que documentos grandes se descarguen lentamente, y esperar por data fetches puede bloquear el renderizado de la página.

Related recipe: Usar streaming para mejorar el rendimiento de la página

Cookies

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

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

---
export const prerender = false; // Not needed in 'server' mode

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>Counter = {counter}</h1>
</html>

Consulta más detalles sobre Astro.cookies y el tipo AstroCookie en la referencia de la API.

`Response`

Astro.response es un objeto ResponseInit estándar. Puede usarse para establecer el estado y los encabezados 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:

---
export const prerender = false; // Not needed in 'server' mode

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

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

// No product found
if (!product) {
  Astro.response.status = 404;
  Astro.response.statusText = 'Not found';
}
---
<html>
  <!-- Page here... -->
</html>

`Astro.response.headers`

Puedes establecer encabezados usando el objeto Astro.response.headers:

---
export const prerender = false; // Not needed in 'server' mode

Astro.response.headers.set('Cache-Control', 'public, max-age=3600');
---
<html>
  <!-- Page here... -->
</html>

Devolver un objeto `Response`

También puedes devolver un objeto Response directamente desde cualquier página usando renderizado 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 devuelve un 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:

---
export const prerender = false; // Not needed in 'server' mode

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

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

// No product found
if (!product) {
  return new Response(null, {
    status: 404,
    statusText: 'Not found'
  });
}

// The product is no longer available
if (!product.isAvailable) {
  return Astro.redirect("/products", 301);
}
---
<html>
  <!-- Page here... -->
</html>

`Request`

Astro.request es un objeto Request estándar. Puede usarse para obtener la url, los headers, el method, e incluso el body de la petición.

Puedes acceder a información adicional desde este objeto para páginas que no están generadas estáticamente.

`Astro.request.headers`

Los encabezados de la petición están disponibles en Astro.request.headers. Esto funciona como el Request.headers del navegador. Es un objeto Headers donde puedes recuperar encabezados como la cookie.

---
export const prerender = false; // Not needed in 'server' mode

const cookie = Astro.request.headers.get('cookie');
// ...
---
<html>
  <!-- Page here... -->
</html>

`Astro.request.method`

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

---
export const prerender = false; // Not needed in 'server' mode

console.log(Astro.request.method) // GET (when navigated to in the browser)
---

Consulta más detalles sobre Astro.request en la referencia de la API.

Endpoints de servidor

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

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

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

Contribuir Comunidad Patrocinar

Renderizado bajo demanda

Adaptadores de servidor

Adaptadores

@astrojs/cloudflare

@astrojs/netlify

@astrojs/node

@astrojs/vercel

Añadir un adaptador

Habilitar el renderizado bajo demanda

modo `'server'`

Características del renderizado bajo demanda

HTML streaming

Cookies

`Response`

`Astro.response.headers`

Devolver un objeto `Response`

`Request`

`Astro.request.headers`

`Astro.request.method`

Endpoints de servidor

Renderizado bajo demanda

Adaptadores de servidor

Adaptadores

@astrojs/cloudflare

@astrojs/netlify

@astrojs/node

@astrojs/vercel

Añadir un adaptador

Habilitar el renderizado bajo demanda

modo 'server'

Características del renderizado bajo demanda

HTML streaming

Cookies

Response

Astro.response.headers

Devolver un objeto Response

Request

Astro.request.headers

Astro.request.method

Endpoints de servidor

modo `'server'`

`Response`

`Astro.response.headers`

Devolver un objeto `Response`

`Request`

`Astro.request.headers`

`Astro.request.method`