⌘ REFERENCIA · 61 elementos
Cheatsheet de Astro 7
El framework entero en un sitio: componentes, directivas, routing, contenido, islands, servidor y CLI. Busca por sintaxis o por lo que quieres hacer.
📄 Componente .astro 6
Frontmatter: script del componente (se ejecuta en servidor)--- … ---
Recibir propsconst { titulo } = Astro.props;
Tipar las propsinterface Props { titulo: string }
Contenido hijo por defecto / nombrado<slot /> · <slot name="pie" />
URL de la petición / sitio configuradoAstro.url · Astro.site
Variable de entornoimport.meta.env.PUBLIC_X
🔧 Templating y directivas 7
Interpolar una expresión JS{expresion}
Renderizar una lista{items.map((i) => <li>{i}</li>)}
Renderizado condicional{cond && <p>…</p>}
Agrupar sin nodo extra (no <>)<Fragment> … </Fragment>
Insertar HTML/crudo o texto escapadoset:html={raw} · set:text
Clases condicionalesclass:list={[…]}
Pasar variables a <style>/<script>define:vars={{ color }}
🗺️ Routing 7
Ruta / (basado en archivos)src/pages/index.astro
Ruta dinámicasrc/pages/[slug].astro
Catch-all (segmentos variables)src/pages/[...rest].astro
Generar rutas en build (SSG)export function getStaticPaths()
Leer el parámetroconst { slug } = Astro.params;
Redirección en SSRreturn Astro.redirect("/login")
Paginación en getStaticPathspaginate(items, { pageSize })
📚 Content collections 7
Definir colecciones y loaderssrc/content.config.ts
Declarar una coleccióndefineCollection({ loader, schema })
Loader de archivos localesglob({ pattern, base })
Validar frontmatter con Zodschema: z.object({ … })
Traer todas las entradasawait getCollection("blog")
Renderizar una entradaconst { Content } = await render(entry)
Relación entre coleccionesreference("autores")
🏝️ Islands y client:* 7
Hidratar de inmediato<Comp client:load />
Hidratar cuando el hilo esté libreclient:idle
Hidratar al entrar en viewportclient:visible
Hidratar según media queryclient:media="(max-width: 50em)"
Solo en cliente (sin SSR)client:only="react"
Añadir un renderer de frameworkastro add react|solid|vue
Estado compartido entre islasnanostores
🛰️ Server: SSR, endpoints, actions 7
Renderizar en servidor esta páginaexport const prerender = false
Endpoint: devuelve un Responseexport function GET({ params })
Respuesta de un endpointreturn new Response(json, { headers })
Middleware de peticionessrc/middleware.ts → onRequest
Pasar datos del middleware a la páginacontext.locals
Action type-safe de servidordefineAction({ input, handler })
Server island (con slot fallback)<Comp server:defer />
⚙️ astro.config y features 7
Modo de render por defectooutput: "static" | "server"
Adapter de despliegue (SSR)adapter: node()/cloudflare()
Integracionesintegrations: [mdx(), sitemap()]
Internacionalizacióni18n: { locales, defaultLocale }
Autorizar imágenes remotasimage: { domains, remotePatterns }
Config de Vite (plugins, alias, ssr)vite: { … }
Prefetch de enlacesprefetch: { prefetchAll: true }
🖼️ Imágenes, fuentes, transiciones 6
Componente de imagen optimizadaimport { Image } from "astro:assets"
Imagen local (con dimensiones)<Image src={img} width height alt />
Múltiples formatos / art direction<Picture formats={["avif","webp"]} />
Fuente optimizada (Fonts API)import { Font } from "astro:assets"
Navegación con View Transitions<ClientRouter />
Emparejar/animar/persistir elementostransition:name / :animate / :persist
🛠️ CLI y tooling 7
Crear un proyectonpm create astro@latest
Servidor de desarrollo (HMR)astro dev
Build de producción → dist/astro build
Previsualizar el buildastro preview
Instalar y configurar una integraciónastro add <integración>
Comprobar tipos y erroresastro check
Regenerar tipos de collections/envastro sync