Saltearse al contenido
Astro Astro

Adaptadores de Renderización Bajo Demanda

Astro te permite elegir la renderización bajo demanda para algunas o todas tus páginas y endpoints. Esto también se conoce como renderización en el lado del servidor (SSR): generar páginas HTML en el servidor cuando se solicitan y enviarlas al cliente. Un adaptador se utiliza para ejecutar tu proyecto en el servidor y manejar estas solicitudes.

Esta renderización bajo demanda te permite:

  • Implementar sesiones para iniciar sesión en tu aplicación.
  • Renderizar datos desde una llamada de API dinámicamente con fetch().
  • Desplegar tu sitio en un servidor usando un adaptador.

Considera habilitar el renderizado en el lado del servidor bajo demanda en tu proyecto de Astro si necesitas lo siguiente:

  • Endpoints de API: Crea páginas específicas que funcionan como endpoints de API para tareas como el acceso a bases de datos, la autenticación y la autorización, al tiempo que mantienen oculta la información confidencial del cliente.

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

  • Contenido que cambia con frecuencia: Genera páginas individuales sin necesidad de reconstruir estáticamente todo tu sitio. Esto es útil cuando el contenido de una página se actualiza con frecuencia.

Habilita la renderización de servidor bajo demanda

Ambos modos de salida de renderización bajo demanda de Astro (server e hybrid) te permiten aprovechar el rendimiento de sitios estáticos al pre-renderizar rutas individuales siempre que sea posible, ya sea que tengas una aplicación completamente dinámica o un sitio en su mayoría estático que solo necesita renderización bajo demanda para rutas seleccionadas.

Para decidir cuál usar en tu proyecto, elige la opción output que represente cómo se renderizarán la mayoría de tus páginas y rutas:

  • output: 'server': Renderizado bajo demanda de forma predeterminada. Utiliza esto cuando la mayoría o toda tu página o aplicación deba renderizarse en el servidor según la solicitud. Cualquier página o endpoint individual puede optar por la pre-renderización.
  • output: 'hybrid': Pre-renderizado a HTML de forma predeterminada. Utiliza esto cuando la mayor parte de tu sitio debería ser estática. Cualquier página o enpoint individual puede optar por no pre-renderizarse.

Debido a que el servidor deberá generar al menos algunas páginas bajo demanda, ambos modos requieren que agregues un adaptador para llevar a cabo las funciones del servidor.

Configura server o hybrid

Para habilitar la renderización bajo demanda, primero actualiza la configuración de tu output a uno de los dos modos renderizados en el servidor.

Por ejemplo, para configurar una aplicación altamente dinámica donde cada página se renderiza bajo demanda de forma predeterminada, agrega output: 'server' a tu configuración de Astro:

astro.config.mjs
import { defineConfig } from 'astro/config';
import node from "@astrojs/node";


export default defineConfig({
  output: 'server',
  adapter: node({
    mode: "standalone"
  })
});

Luego, puedes optar por anular la renderización bajo demanda predeterminada del modo server en cualquier página o ruta exportando const prerender = true:

src/pages/my-static-page.astro
---
export const prerender = true;
// ...
---
<html>
  <!-- Estático, página pre-renderizada aquí... -->
</html>

Optando por la pre-renderización en el modo server

Para una aplicación en su mayoría renderizada en el servidor configurada como output: server, agrega export const prerender = true a cualquier página o ruta para pre-renderizar una página estática o endpoint:

src/pages/mypage.astro
---
export const prerender = true;
// ...
---
<html>
  <!-- Estático, página pre-renderizada aquí... -->
</html>
src/pages/mypage.mdx
---
layout: '../layouts/markdown.astro'
title: 'Mi página'
---
export const prerender = true;
# Esta es mi página estática, pre-renderizada
src/pages/myendpoint.js
export const prerender = true;


export async function GET() {
  return new Response(
    JSON.stringify({
      message: `Este es mi endpoint estático`,
    }),
  );
}

Optando por no pre-renderizar en el modo hybrid

Para un sitio en su mayoría estático configurado como output: hybrid, agrega export const prerender = false a cualquier archivo que deba renderizarse en el servidor bajo demanda:

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 numero aleatorio: ${number}`,
    }),
  );
}

Añade un Adaptador

Para desplegar un proyecto en modo server o hybrid, también debes agregar un adaptador. Esto se debe a que ambos modos requieren un entorno de ejecución del servidor: el entorno que ejecuta código en el servidor para generar páginas cuando se solicitan. Cada adaptador permite a Astro generar un script que ejecuta tu proyecto en un entorno de ejecución específico, como Vercel, Netlify o Cloudflare.

Puedes encontrar tanto adaptadores oficiales como de la comunidad en nuestro directorio de integraciones. Elige el que corresponda a tu entorno de despligue.

Instalación usando astro add

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

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

Terminal window
npx astro add vercel

Instalación Manual

También puedes agregar un adaptador manualmente instalando el paquete y actualizando astro.config.mjs por ti mismo.

Por ejemplo, para instalar manualmente el adaptador de Vercel:

  1. Instala el adaptador a las dependencias de tu proyecto usando tu gestor de paquetes preferido:

    Terminal window
    npm install @astrojs/vercel

  2. Agrega el adaptador a tu archivo astro.config.mjs en la importación y exportación por defecto, junto con el modo de output que desees:

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel/serverless';
    

    export default defineConfig({
      output: 'server',
      adapter: vercel(),
    });

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

Características de renderización bajo demanda

Transmisión de HTML

Con la transmisión de HTML, un documento se divide en fragmentos, se envía por la red en orden y se representa en la página en ese orden. En el modo server o hybrid, Astro utiliza la transmisión de HTML para enviar cada componente al navegador a medida que los renderiza. Esto garantiza que el usuario vea tu HTML lo más rápido posible, aunque las condiciones de red pueden hacer que se descarguen documentos grandes lentamente y esperar a que se completen las solicitudes de datos puede bloquear la representación de la página.

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

Cookies

En los modos server e hybrid, una página o endpoint de API puede verificar, establecer, obtener y eliminar cookies.

El ejemplo a continuación actualiza el valor de una cookie para un contador de vistas de página:

src/pages/index.astro
---
let counter = 0


if (Astro.cookies.has("counter")) {
  const cookie = Astro.cookies.get("counter")
  counter = cookie.number() + 1
}


Astro.cookies.set("counter",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

También puedes devolver un Response desde cualquier página utilizando la renderización bajo demanda.

El siguiente ejemplo devuelve un código 404 en una página dinámica después de buscar un ID en la base de datos:

src/pages/[id].astro
---
import { getProduct } from '../api';


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


// Producto no encontrado
if (!product) {
  return new Response(null, {
    status: 404,
    statusText: 'No encontrado'
  });
}
---
<html>
  <!-- Maquetado aquí... -->
</html>

Request

Astro.request es un objeto estándar Request. Puede utilizarse para obtener la url, headers, method, e incluso el cuerpo de la solicitud.

En ambos modos server e hybrid, puedes acceder a información adicional de este objeto para páginas que no están generadas estáticamente.

Astro.request.headers

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

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

Astro.request.method

El método HTTP utilizado en la solicitud está disponible como Astro.request.method. Esto funciona de manera similar al Request.method del navegador. Devuelve la representación de string del método HTTP utilizado en la solicitud.

src/pages/index.astro
---
console.log(Astro.request.method) // GET (cuando se navega en el navegador)
---

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

Endpoints del Servidor

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

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

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