@astrojs/ vercel

Este adaptador permite a Astro desplegar tus rutas y características renderizadas bajo demanda en Vercel, incluyendo server islands, actions, y sessions.

Si estás usando Astro como constructor de sitios estáticos, solo necesitas este adaptador si estás usando servicios adicionales de Vercel (p. ej. Vercel Web Analytics, Vercel Image Optimization). De lo contrario, no necesitas un adaptador para desplegar tu sitio estático.

Aprende cómo desplegar tu sitio de Astro en nuestra guía de despliegue en Vercel.

Por qué Astro Vercel?

Vercel es una plataforma de despliegue que te permite alojar tu sitio conectándolo directamente a tu repositorio de GitHub. Este adaptador mejora el proceso de construcción de Astro para preparar tu proyecto para el despliegue a través de Vercel.

Instalación

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Añade el adaptador de Vercel para habilitar el renderizado bajo demanda en tu proyecto de Astro con el siguiente comando astro add. Esto instalará @astrojs/vercel y hará los cambios apropiados en tu archivo astro.config.mjs en un solo paso.

npm

npx astro add vercel

pnpm

pnpm astro add vercel

Yarn

yarn astro add vercel

Ahora, puedes habilitar el renderizado bajo demanda por página, o establecer la configuración de salida de tu compilación en output: 'server' para renderizar todas tus páginas en el servidor por defecto.

Instalación manual

Primero, añade el adaptador @astrojs/vercel a las dependencias de tu proyecto usando tu gestor de paquetes preferido:

npm

npm install @astrojs/vercel

pnpm

pnpm add @astrojs/vercel

Yarn

yarn add @astrojs/vercel

Luego, añade el adaptador a tu archivo astro.config.*:

astro.config.mjs

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

export default defineConfig({
  // ...
  adapter: vercel(),
});

Uso

Descubre más sobre desplegar tu proyecto en Vercel.

Puedes desplegar por CLI (vercel deploy) o conectando tu nuevo repositorio en el Vercel Dashboard. Alternativamente, puedes crear un build de producción localmente:

astro build
vercel deploy --prebuilt

Configuración

Para configurar este adaptador, pasa un objeto a la llamada de la función vercel() en astro.config.mjs:

webAnalytics

Tipo: VercelWebAnalyticsConfig
Disponible para: Serverless, Static

Añadido en: @astrojs/vercel@3.8.0

Con @vercel/analytics@1.3.x o anterior, puedes establecer webAnalytics: { enabled: true } en tu configuración de Astro para inyectar los scripts de seguimiento de Vercel en todas tus páginas.

Para @vercel/analytics@1.4.0 y posteriores, usa el componente Analytics de Vercel para habilitar Vercel Web Analytics en su lugar.

astro.config.mjs

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

export default defineConfig({
  // ...
  adapter: vercel({
    webAnalytics: {
      enabled: true,
    },
  }),
});

imagesConfig

Tipo: VercelImageConfig
Disponible para: Serverless, Static

Añadido en: @astrojs/vercel@3.3.0

Opciones de configuración para la API de Image Optimization de Vercel. Consulta la documentación de configuración de imágenes de Vercel para una lista completa de parámetros soportados.

Las propiedades domains y remotePatterns se rellenarán automáticamente usando la configuración de image correspondiente de Astro.

astro.config.mjs

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

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imagesConfig: {
      sizes: [320, 640, 1280],
    },
  }),
});

imageService

Tipo: boolean
Disponible para: Serverless, Static

Añadido en: @astrojs/vercel@3.3.0

Cuando está habilitado, un Image Service impulsado por la API de Vercel Image Optimization se configurará automáticamente y se usará en producción. En desarrollo, el servicio de imágenes especificado por devImageService se usará en su lugar.

astro.config.mjs

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

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imageService: true,
  }),
});

src/pages/index.astro

---
import { Image } from 'astro:assets';
import astroLogo from '../assets/logo.png';
---

<!-- This component -->
<Image src={astroLogo} alt="My super logo!" />

<!-- will become the following HTML -->
<img
  src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..."
  alt="My super logo!"
  loading="lazy"
  decoding="async"
  width="..."
  height="..."
/>

devImageService

Tipo: 'sharp' | string
Predeterminado: sharp
Disponible para: Serverless, Static

Añadido en: @astrojs/vercel@3.8.0

Te permite configurar qué servicio de imágenes usar en desarrollo cuando imageService está habilitado. Esto puede ser útil si no puedes instalar las dependencias de Sharp en tu máquina de desarrollo, pero usar otro servicio de imágenes como Squoosh te permitiría previsualizar imágenes en tu entorno de desarrollo. El build no se ve afectado y siempre usará Vercel Image Optimization.

También se puede establecer a cualquier valor arbitrario para usar un servicio de imágenes personalizado en lugar de los integrados en Astro.

astro.config.mjs

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

export default defineConfig({
  // ...
  adapter: vercel({
    imageService: true,
    devImageService: 'sharp',
  }),
});

isr

Tipo: boolean | VercelISRConfig
Predeterminado: false
Disponible para: Serverless

Añadido en: @astrojs/vercel@7.2.0

Permite que tu proyecto se despliegue como una función ISR (Incremental Static Regeneration), que almacena en caché tus páginas renderizadas bajo demanda de la misma manera que las páginas prerenderizadas después de la primera solicitud.

Para habilitar esta característica, establece isr en true en la configuración de tu adaptador de Vercel en astro.config.mjs:

astro.config.mjs

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

export default defineConfig({
  // ...
  adapter: vercel({
    isr: true,
  }),
});

Ten en cuenta que las solicitudes de funciones ISR no incluyen parámetros de búsqueda, similar a las solicitudes en modo estático.

Invalidación de caché ISR

Por defecto, una función ISR almacena en caché durante la duración de tu despliegue. Puedes controlar aún más el almacenamiento en caché estableciendo un tiempo de expiración, o excluyendo rutas particulares del almacenamiento en caché por completo.

Invalidación basada en tiempo

Por defecto, cuando ISR está habilitado, las rutas usan la protección de caché de Vercel y cualquier header Cache-Control se ignora. Configurar un valor de expiration (en segundos) te permite controlar cuánto tiempo se almacenan en caché las rutas. Esto significa que las directivas Cache-Control establecidas por tu aplicación también se respetan.

El siguiente ejemplo define expiration para almacenar en caché todas las páginas en la primera solicitud y guardarlas por 1 día:

astro.config.mjs

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

export default defineConfig({
  // ...
  adapter: vercel({
    isr: {
      expiration: 60 * 60 * 24,
    },
  }),
});

Invalidación bajo demanda

Para invalidar páginas en caché programáticamente, crea un bypass token y proporciónalo a la configuración isr:

astro.config.mjs

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

export default defineConfig({
    adapter: vercel({
        isr: {
            // A secret random string that you create.
            bypassToken: "005556d774a8",
        }
    })
})

Luego puedes invalidar una página en caché enviando una solicitud HEAD o GET a la URL de la página con el header x-prerender-revalidate establecido en tu bypass token. Consulta la documentación de ISR bajo demanda de Vercel para más detalles.

Modo borrador

Para omitir la caché ISR y renderizar contenido fresco (p. ej., para previsualizar contenido no publicado de un CMS), usa el modo borrador de Vercel. Esto requiere definir un bypassToken en tu configuración y reutilizar su valor en tus páginas para establecer una cookie llamada __prerender_bypass.

Excluir rutas del almacenamiento en caché

Usa la opción exclude para evitar que rutas específicas sean almacenadas en caché por ISR. Estas rutas siempre se renderizarán frescas en cada solicitud:

astro.config.mjs

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

export default defineConfig({
    adapter: vercel({
        isr: {
            // Paths that will always be served fresh.
            exclude: [
                '/preview',
                '/auth/[page]',
                /^\/api\/.+/ // Regular expressions supported since @astrojs/vercel@v8.1.0
            ]
        }
    })
})

includeFiles

Tipo: string[]
Disponible para: Serverless

Usa esta propiedad para forzar que los archivos se incluyan en el bundle de tu función. Esto es útil cuando notas que faltan archivos.

astro.config.mjs

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

export default defineConfig({
  // ...
  adapter: vercel({
    includeFiles: ['./my-data.json'],
  }),
});

excludeFiles

Tipo: string[]
Disponible para: Serverless

Usa esta propiedad para excluir cualquier archivo del proceso de bundling que de otro modo sería incluido.

astro.config.mjs

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

export default defineConfig({
  // ...
  adapter: vercel({
    excludeFiles: ['./src/some_big_file.jpg'],
  }),
});

maxDuration

Tipo: number
Disponible para: Serverless

Usa esta propiedad para extender o limitar la duración máxima (en segundos) que las Serverless Functions pueden ejecutarse antes de agotar el tiempo. Consulta la documentación de Vercel para el límite predeterminado y máximo de tu plan de cuenta.

astro.config.mjs

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

export default defineConfig({
// ...
  adapter: vercel({
    maxDuration: 60
  }),
});

skewProtection

Tipo: boolean
Disponible para: Serverless

Añadido en: @astrojs/vercel@7.6.0

Usa esta propiedad para habilitar Vercel Skew protection (disponible con cuentas Vercel Pro y Enterprise).

astro.config.mjs

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

export default defineConfig({
// ...
  adapter: vercel({
    skewProtection: true
  }),
});

staticHeaders

Tipo: boolean
Predeterminado: false
Disponible para: Serverless

Añadido en: @astrojs/vercel@10.0.0

Permite especificar headers personalizados para páginas prerenderizadas en la configuración de Vercel.

Si está habilitado, el adaptador guardará headers estáticos en el archivo vercel.json de Vercel cuando sean proporcionados por características de Astro, como Content Security Policy.

Por ejemplo, cuando Content Security Policy está habilitado, staticHeaders se puede usar para añadir los headers CSP a tu configuración de Vercel, en lugar de crear un elemento <meta>:

astro.config.mjs

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

export default defineConfig({
  security: {
    csp: true
  },
  adapter: vercel({
    staticHeaders: true
  })
});

Ejecutar middleware de Astro en Vercel Edge Functions

El adaptador @astrojs/vercel puede crear una edge function a partir de un middleware de Astro en tu base de código. Cuando middlewareMode se establece en 'edge', una edge function ejecutará tu código de middleware para todas las solicitudes, incluyendo assets estáticos, páginas prerenderizadas y páginas renderizadas bajo demanda.

Para las páginas renderizadas bajo demanda, el objeto context.locals se serializa utilizando JSON y se envía en una cabecera para la función serverless, que realiza el renderizado. Como medida de seguridad, la función serverless se negará a atender solicitudes con una respuesta 403 Forbidden a menos que provengan de la función de borde generada.

Esta es una característica opcional. Para habilitarla, establece middlewareMode en 'edge':

astro.config.mjs

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

export default defineConfig({
  // ...
  adapter: vercel({
    middlewareMode: 'edge',
  }),
});

El middleware edge tiene acceso al RequestContext de Vercel como ctx.locals.vercel.edge. Si estás usando TypeScript, puedes obtener los tipos correctos actualizando src/env.d.ts para usar EdgeLocals:

type EdgeLocals = import('@astrojs/vercel').EdgeLocals

declare namespace App {
  interface Locals extends EdgeLocals {
    // ...
  }
}

Sesiones

La API de Sesiones de Astro te permite almacenar fácilmente datos de usuario entre solicitudes. Esto se puede usar para cosas como datos y preferencias de usuario, carritos de compras y credenciales de autenticación. A diferencia del almacenamiento en cookies, no hay límites de tamaño en los datos y se pueden restaurar en diferentes dispositivos.

Cuando uses sesiones en Vercel, necesitas configurar un driver para el almacenamiento de sesiones. Puedes instalar un proveedor de almacenamiento desde el marketplace de Vercel.

Por ejemplo, si has instalado una integración de Redis y vinculado una base de datos a tu sitio:

1. Instala el paquete ioredis:

   npm

   npm install ioredis

   pnpm

   pnpm install ioredis

   Yarn

   yarn add ioredis

2. Usa la CLI de Vercel para cargar tus variables de entorno:

   vercel env pull .env.local

   Esto creará un archivo .env.local en la raíz de tu proyecto con las variables de entorno necesarias para conectarte a tu base de datos de Redis cuando desarrolles localmente.

3. Configura el driver de sesión:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import vercel from '@astrojs/vercel';
   
   export default defineConfig({
     adapter: vercel(),
     session: {
       driver: 'redis',
       options: {
         url: process.env.REDIS_URL,
       },
     },
   });

Soporte de versiones de Node.js

El adaptador @astrojs/vercel soporta versiones específicas de Node.js para desplegar tu proyecto de Astro en Vercel. Para ver las versiones de Node.js soportadas en Vercel, haz clic en la pestaña de configuración de un proyecto y desplázate hacia abajo hasta la sección “Node.js Version”.

Consulta la documentación de Vercel para aprender más.

Más integraciones

Frameworks de front-end

• 

  @astrojs/alpinejs

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

Adaptadores

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Otras integraciones

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap