Saltearse al contenido

@astrojs/ netlify

v5.2.0 GitHub npm Changelog

Este adaptador permite a Astro desplegar tu sitio renderizado en modo hybrid o server en Netlify.

Aprende como desplegar tu sitio Astro en nuestra guía de despliegue en Netlify.

¿Por qué Astro Netlify?

Sección titulada ¿Por qué Astro Netlify?

Netlify 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 Netlify.

Instalación

Sección titulada Instalación

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

Agrega el adaptador de Netlify para habilitar SSR en tu proyecto Astro con el comando astro add. Esto instalará @astrojs/netlify y hará los cambios apropiados en tu archivo astro.config.mjs en un solo paso.

Ventana de terminal
npx astro add netlify

Instalación manual

Sección titulada Instalación manual

Primero, instala el adaptador de Netlify en las dependencias de tu proyecto usando tu gestor de paquetes preferido:

Ventana de terminal
npm install @astrojs/netlify

Luego, agrega el adaptador y tu modo de renderizado bajo demanda deseado a tu archivo astro.config.*:

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


 export default defineConfig({
    // ...
    output: 'server',
    adapter: netlify(),
 });

Uso

Sección titulada Uso

Lee la guía completa de despliegue aquí.

Sigue las instrucciones para construir tu sitio localmente. Después de construir, tendrás una carpeta .netlify/ que contiene tanto Funciones Netlify en la carpeta .netlify/functions-internal/ como Funciones Netlify Edge en la carpeta .netlify/edge-functions/.

Para desplegar tu sitio, instala la CLI de Netlify y ejecuta:

Ventana de terminal
netlify deploy

El artículo del blog de Netlify sobre Astro y la documentación de Netlify proporcionan más información sobre cómo usar esta integración para desplegar en Netlify.

Acceder al contexto edge desde tu sitio

Sección titulada Acceder al contexto edge desde tu sitio

Las Funciones Edge de Netlify proporcionan un objeto de contexto que incluye metadatos sobre la solicitud, como la IP de un usuario, datos de geolocalización y cookies.

Se puede acceder a través del objeto Astro.locals.netlify.context:

---
const {
  geo: { city },
} = Astro.locals.netlify.context;
---


<h1>Hola, amable visitante de {city}!</h1>

Si estás usando TypeScript, puedes obtener tipos adecuados actualizando src/env.d.ts para usar NetlifyLocals:

src/env.d.ts
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />


type NetlifyLocals = import('@astrojs/netlify').NetlifyLocals


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

Esto no está disponible en las páginas prerenderizadas.

Ejecutar el middleware de Astro con Funciones Edge de Netlify

Sección titulada Ejecutar el middleware de Astro con Funciones Edge de Netlify

Cualquier middleware de Astro se aplica a las páginas prerenderizadas en tiempo de construcción y a las páginas renderizadas bajo demanda en tiempo de ejecución. Si estás usando el adaptador de Netlify Edge, puedes ejecutar el middleware de Astro en las Funciones Edge de Netlify para que se aplique a las páginas prerenderizadas y renderizadas bajo demanda.

Para implementar redirecciones, control de acceso o encabezados de respuesta personalizados para las páginas prerenderizadas, ejecuta tu middleware en las Funciones Edge de Netlify habilitando la opción edgeMiddleware:

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


export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
   edgeMiddleware: true,
  }),
});

Cuando edgeMiddleware está habilitado, una función edge ejecutará tu código de middleware para todas las solicitudes, incluyendo activos estáticos, páginas prerenderizadas y páginas renderizadas bajo demanda.

Para las páginas renderizadas bajo demanda, el objeto context.locals se serializa usando JSON y se envía en un encabezado para la función sin servidor, que realiza la renderización. Como medida de seguridad, la función sin servidor se negará a servir solicitudes con una respuesta 403 Forbidden a menos que provengan de la función edge generada.

Soporte para Netlify Image CDN

Sección titulada Soporte para Netlify Image CDN

Este adaptador por defecto utiliza el CDN de imágenes de Netlify para transformar imágenes sobre la marcha sin afectar a los tiempos de construcción. Es implementado usando un Servicio de Imágenes Astro bajo el capó.

Para optar por no utilizar la optimización de imágenes remotas de Netlify, usa la opción imageCDN:

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


export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
    imageCDN: false,
  }),
});

Si estás usando imagenes alojadas en otro dominio, debes autorizar los patrones de dominio o URL usando las opciones de configuración image.domains o image.remotePatterns:

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


export default defineConfig({
    // ...
    output: 'server',
    adapter: netlify(),
    image: {
      domains: ['example.com'],
    },
});

Para más información, consulta la guía para autorizar imagenes remotas. Esto no es requerido para imagenes alojadas en el mismo dominio que tu sitio.

Sitios estáticos con el adaptador de Netlify

Sección titulada Sitios estáticos con el adaptador de Netlify

Para sitios estáticos (output: 'static') alojados en Netlify, normalmente no se necesita un adaptador. Sin embargo, algunas características de despliegue solo están disponibles a través de un adaptador.

Los sitios estáticos necesitarán instalar este adaptador para utilizar y configurar el servicio de imágenes de Netlify.

Si utilizas la configuración de redirects en tu archivo de configuración de Astro, puedes utilizar el adaptador de Netlify para traducirlo al formato adecuado de _redirects.

astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/static';
export default defineConfig({
  // ...
  adapter: netlify(),
  redirects: {
    '/blog/old-post': '/blog/new-post',
  },
});

Una vez que ejecutes astro build, se generará un archivo dist/_redirects. Netlify utilizará ese archivo para enrutamiento adecuado de las páginas en producción.

Caché de páginas

Sección titulada Caché de páginas

Las páginas renderizadas bajo demanda sin ningún contenido dinámico pueden ser almacenadas en caché para mejorar el rendimiento y reducir el uso de recursos. Habilitar la opción cacheOnDemandPages en el adaptador almacenará en caché todas las páginas renderizadas bajo demanda durante un año:

astro.config.mjs
export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
    cacheOnDemandPages: true,
  }),
});

Esto se puede cambiar en cada página agregando encabezados de caché a tu respuesta:

pages/index.astro
---
import Layout from '../components/Layout.astro';


Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=45, must-revalidate');
---


<Layout title="Astro on Netlify">
  {new Date()}
</Layout>

Con control de caché de granularidad fina, Netlify soporta encabdezados de caché estándar como CDN-Cache-Control o Vary.

Refiérete a la documentación para aprender a implementar, por ejemplo, el tiempo de vida (TTL) o el almacenamiento en caché obsoleto mientras se vuelve a validar (SWR): https://docs.netlify.com/platform/caching

Ejemplos

Sección titulada Ejemplos

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones