¿Qué comando inicia el servidor de desarrollo de Astro con HMR?
`npm run dev`
Flashcards con solución de Astro
¿Qué requisito de Node.js tiene Astro según las guías actuales?
Soporta versiones `v18.20.8`, `v20.3.0`, o `v22.0.0+`.
¿Cuál es la función de `stega` en la configuración de Sanity para Astro?
Habilitar la codificación que permite los "overlays" de edición visual en tiempo real.
¿Cómo accede Astro a los archivos locales para generar listas de contenido dinámicas?
Mediante la función `import.meta.glob()` o la API de Content Collections.
¿Para qué se usa el archivo `sanity.config.ts`?
Para configurar el proyecto de Sanity, definir los esquemas de los documentos y añadir plugins como `structureTool`.
¿Para qué se utiliza la directiva `client:media="{query}"`?
Para hidratar el componente solo cuando se cumple una consulta de medios de CSS específica.
¿Cuál es la función del archivo `src/content.config.ts`?
Configurar y definir las colecciones de contenido (Content Collections) del proyecto.
¿Cómo se llama el lenguaje de consulta utilizado para obtener datos de Sanity CMS?
GROQ (Graph-Relational Object Query).
¿Qué función debe exportar una ruta dinámica en modo estático (SSG) para generar sus rutas?
La función `getStaticPaths()`.
¿Qué es un componente de Astro frente a un componente de framework (React/Vue)?
Los componentes de Astro se renderizan exclusivamente en el servidor a HTML; los de framework pueden ejecutarse en el cliente si se hidratan.
¿Qué extensión de archivo define una página o ruta en Astro de forma nativa?
La extensión `.astro`.
¿Cuál es la función principal de "Astro Actions"?
Definir funciones del lado del servidor seguras en cuanto a tipos que pueden ser llamadas desde el cliente.
¿Qué plugin de Tailwind es necesario para dar estilo automático a contenido de Markdown renderizado?
El plugin de tipografía (`@tailwindcss/typography`) mediante la clase `prose`.
¿Cómo se renderiza el contenido de una entrada de Markdown recuperada de una colección?
Utilizando la función `render()` que devuelve un componente `<Content />`.
¿Qué ocurre si un archivo viola el esquema de Zod definido para su colección?
La construcción (build) de Astro fallará y mostrará un mensaje de error descriptivo.
¿Por qué es preferible el plugin de Vite para Tailwind v4 en Astro sobre la antigua integración `@astrojs/tailwind`?
Porque la integración antigua está depreciada para la versión 4 y el plugin de Vite es el camino oficial recomendado.
¿Qué es el "skew protection" en despliegues con Netlify?
Asegura que los usuarios reciban contenido de la misma versión del despliegue durante una nueva publicación para evitar errores de carga.
Directiva de cliente: `client:visible`
Hidrata el componente únicamente cuando entra en el campo de visión (viewport) del usuario.
¿Qué herramienta permite editar contenido de Sanity CMS directamente desde la interfaz de Astro?
Presentation Tool (Visual Editing).
Enrutamiento: Parámetros de resto (`[...path]`)
Permite capturar rutas de cualquier profundidad en la URL, devolviendo los segmentos como una cadena o array.
¿En qué directorio se basa el sistema de enrutamiento de Astro?
En el directorio `src/pages/`.
¿Qué directiva se utiliza para convertir un componente en una Server Island?
La directiva `server:defer`.
¿Qué es el cargador `glob()` en las Content Collections?
Un cargador integrado que busca archivos en el sistema local basándose en patrones de archivos (como `**/*.md`).
¿Qué es el "frontmatter" en un archivo de Markdown en Astro?
Metadatos YAML al principio del archivo delimitados por `---` que contienen variables como el título o la fecha.
¿Qué mecanismo utiliza Astro para restaurar la interactividad solo en componentes específicos?
La hidratación parcial (partial hydration).
¿Cómo se define una ruta dinámica en el sistema de archivos de Astro?
Envolviendo el nombre del archivo entre corchetes, por ejemplo: `[slug].astro`.
¿Qué es el "Content Layer API" introducido en Astro v5.0?
Una API escalable para cargar, almacenar y consultar contenido de fuentes locales o remotas con seguridad de tipos.
¿Cómo se define un esquema de validación para una colección que referencia a otra colección?
Usando la función `reference()` de `astro:content` dentro del esquema de Zod.
¿Qué comando de la CLI de Astro se utiliza para añadir la integración de Tailwind?
`npx astro add tailwind`
¿Qué biblioteca utiliza Astro para validar los esquemas de las colecciones de contenido?
Zod.
Cargador de colecciones: `file()`
Crea múltiples entradas a partir de un único archivo local que contiene un array de objetos.
¿En qué directorio se genera el contenido final tras ejecutar `npm run build`?
En el directorio `dist/`.
¿Cómo se aplican estilos globales en Astro al usar Tailwind v4?
Importando un archivo CSS global con la directiva `@import "tailwindcss";` en el layout base.
Concepto: SSR (Server-Side Rendering)
Modelo donde las páginas se generan en el servidor en el momento de la solicitud, permitiendo contenido altamente dinámico.
¿Cómo se accede a las variables de entorno en Astro?
A través de `import.meta.env` (para variables con prefijo `PUBLIC_`) o mediante el módulo `astro:env`.
¿Para qué sirve el elemento `<slot />` en un componente de Astro?
Actúa como un marcador de posición para el contenido hijo que se pasa al componente.
Paginación: Función `paginate()`
Se utiliza dentro de `getStaticPaths()` para dividir un array de datos en múltiples páginas con propiedades de navegación.
¿Qué proporciona la propiedad `page` pasada a una ruta paginada?
Contiene los datos de la página actual, la URL de la página anterior/siguiente y el conteo total de elementos.
¿Qué hace el adaptador `@astrojs/netlify`?
Permite que Astro utilice funciones de renderizado bajo demanda (SSR) y servicios específicos en la plataforma Netlify.
¿Qué hace la directiva `client:only="{framework}"`?
Omite el renderizado en el servidor y renderiza el componente solo en el cliente.
¿Qué es un "middleware" en Astro?
Código que se ejecuta antes de cada renderizado de página o ruta de API para interceptar solicitudes y respuestas.
Concepto: SSG (Static Site Generation)
Modelo donde las páginas se generan durante el tiempo de construcción y se sirven como archivos estáticos.
Directiva de cliente: `client:idle`
Hidrata el componente cuando el hilo principal del navegador está inactivo.
¿Qué es un "Layout" en el contexto de Astro?
Un componente especializado que proporciona una estructura de página común (como `<html>`, `<head>`, etc.) para varias páginas.
Directiva de cliente: `client:load`
Hidrata el componente inmediatamente cuando la página termina de cargarse.
¿Cuál es la diferencia entre `getCollection()` y `getEntry()`?
`getCollection()` obtiene todos los elementos de una colección, mientras que `getEntry()` recupera un solo elemento específico.
¿Cuál es el propósito principal de la "Arquitectura de Islas" en Astro?
Permitir componentes interactivos aislados dentro de una página de HTML estático.
¿Para qué sirve el componente `<Image />` incorporado de Astro?
Optimiza automáticamente las imágenes (formato, tamaño) para mejorar el rendimiento y evitar el Cumulative Layout Shift (CLS).
¿Qué son las "Server Islands"?
Componentes dinámicos o personalizados cuyo renderizado se pospone para no retrasar la carga inicial de la página estática.
¿Cuál es la diferencia entre una redirección y un "rewrite"?
Una redirección cambia la URL en el navegador; un rewrite muestra el contenido de otra ruta manteniendo la URL original.
¿Qué ventaja ofrece el uso de `ASTRO_KEY` como variable de entorno?
Proporciona una clave constante para cifrar y descifrar las propiedades de las Server Islands en despliegues continuos.
¿Qué es "Portable Text" en el contexto de Sanity y Astro?
Un formato de texto enriquecido estructurado en JSON que Astro puede renderizar mediante componentes personalizados.
¿Cómo se excluye un archivo o directorio dentro de `src/pages/` del proceso de construcción?
Prefijando su nombre con un guion bajo (`_`).
¿Qué permite la API de "View Transitions"?
Crear transiciones fluidas y persistencia de estado entre páginas sin la sobrecarga de un framework de SPA pesado.
¿Cómo se define el contenido de carga temporal en una Server Island?
Usando un elemento con el atributo `slot="fallback"` dentro del componente.
¿Qué representan las dos secciones divididas por vallas de código (`---`) en un archivo `.astro`?
La sección superior es el script del componente (JavaScript/TypeScript) y la inferior es la plantilla HTML.
Cargador de colecciones: `glob()`
Crea entradas a partir de directorios de archivos locales (Markdown, JSON, etc.) usando patrones de búsqueda.
¿Cómo se define una redirección permanente en `astro.config.mjs`?
Mediante la propiedad `redirects`, mapeando la ruta antigua a la nueva.
¿Qué significa que Astro sea "zero-JavaScript-by-default"?
Astro elimina todo el JavaScript del lado del cliente a menos que se indique explícitamente lo contrario.
¿Qué comando se usa para previsualizar localmente la versión de producción del sitio?
`npm run build && npm run preview`
¿Qué función cumple el archivo `wrangler.jsonc` en despliegues hacia Cloudflare?
Configura la infraestructura de Cloudflare Workers/Pages, especificando el directorio de salida y banderas de compatibilidad.
¿Qué función cumple `Astro.response.headers`?
Permite a los desarrolladores controlar los encabezados de respuesta HTTP, como el control de caché.
¿Para qué sirve la función `Astro.redirect()`?
Para redirigir al usuario a otra página de forma dinámica basándose en la lógica del servidor.
¿Qué sucede si dos rutas en Astro intentan construir el mismo path de URL?
Astro aplica un orden de prioridad donde las rutas estáticas y las rutas con más segmentos específicos tienen preferencia.
¿Cómo se habilita el renderizado bajo demanda (SSR) en Astro?
Estableciendo la opción `output: 'server'` o `'hybrid'` en la configuración de Astro y añadiendo un adaptador.
Página 1 / 1