Astro en Netlify Edge Functions

Hace dos semanas, anunciamos soporte experimental para renderizado del lado del servidor (SSR) con Netlify como nuestro socio de lanzamiento en Netlify Functions. Hoy, anunciamos soporte para SSR en la nueva plataforma Edge Functions de Netlify. Edge Functions salió en vivo hoy y Astro tiene soporte desde el día 1.

Con SSR y Astro, puedes:

• Construir grandes sitios respaldados por CMS que son difíciles de escalar con SSG (generación de sitios estáticos).
• Construir apps que necesitan autenticación o estado persistente, como backends de e-commerce.
• Usar una sintaxis simplificada tipo HTML con toques de JavaScript, solo cuando lo necesites.

Con edge rendering acercas el SSR a tus usuarios, logrando que los primeros bytes lleguen al navegador más rápido. Combinado con servir assets estáticos en el edge, esto te da un rendimiento de red óptimo. Astro está comprometido a hacer que los sitios de contenido performantes sean fáciles de lograr, y la nueva plataforma Edge Functions de Netlify es un lugar ideal para desplegar tus aplicaciones SSR de Astro hoy.

Para empezar, instala el adaptador de Netlify:

npm install @astrojs/netlify

Y luego agrega el adaptador en tu archivo astro.config.mjs:

import { defineConfig } from "astro/config"
import netlify from "@astrojs/netlify/edge-functions"

export default defineConfig({
  adapter: netlify(),
})

Migrando desde Netlify Functions

Astro ya está disponible en Netlify Functions, un runtime serverless basado en Node.js. Con Edge Functions puedes obtener un rendimiento aún mejor, y hemos intentado que sea lo más fácil posible cambiar.

Compatibilidad

Netlify Edge Functions se ejecutan sobre Deno, pero la mayoría de las aplicaciones de Astro no necesitan cambiar código para desplegarse en el nuevo entorno. El adaptador de Netlify se encarga de compilar y empaquetar tu código fuente para que pueda ejecutarse en Deno.

Si estás usando dependencias que dependen de los módulos integrados de Node.js, es posible que no puedas salir de Netlify Functions. Si es así, Netlify Functions sigue siendo una gran plataforma para la mayoría de los casos de uso y proporciona un runtime estándar de Node.js para soporte de paquetes Node.

Si usas el componente <Markdown />, actualmente no puede ejecutarse en entornos non-Node. Una posible alternativa mientras tanto es usar páginas .md.

Migración

Primero, actualiza a la última versión de @astrojs/netlify así:

npm install @astrojs/netlify@latest

Luego, actualiza tu astro.config.mjs para importar el adaptador de edge functions:

import { defineConfig } from 'astro/config';
 import netlify from '@astrojs/netlify/functions';
 import netlify from '@astrojs/netlify/edge-functions';

export default defineConfig({
  adapter: netlify()
});

¡Y eso debería ser todo! La próxima vez que hagas build, generará un build SSR compatible con Edge Functions, que luego puede ser desplegado con netlify deploy --build.

Alianzas

Netlify fue el socio de lanzamiento de Astro para SSR. Incluso dentro del corto tiempo desde ese anuncio hemos visto un apoyo tremendo de otras plataformas de hosting con adaptadores ya construidos o en desarrollo.

Si te gustaría construir un adaptador para otra plataforma, pásate por nuestro canal de Discord y ¡estaremos felices de ayudarte!