Contenido del curso
Primeros Pasos
Proyecto
Astro API
- 10

Cómo crear componentes reutilizables en Astro
06:05 min - 11

Páginas y rutas con archivos en Astro
06:04 min - 12

Creación de Plantillas en Astro para Páginas Markdown
08:49 min - 13

Iteración de Archivos Markdown en Proyecto Astro con JavaScript
12:15 min - 14

variables JSX en archivos MDX de Astro
06:51 min - 15

Rutas estáticas y dinámicas en Astro
15:12 min - 16

Rutas dinámicas con getStaticPaths en Astro
07:30 min - 17

Crea un layout de posts en Astro con Tailwind
11:23 min
Astro Islands
Deploy
Bonus
Cierre
Por qué Astro es rápido por defecto
Resumen
Astro es un framework web todo en uno pensado para crear páginas rápidas y centradas en el contenido. Si vienes de HTML, CSS y estás explorando JavaScript, este enfoque te abre la puerta a construir landing pages, blogs y hasta e-commerce sin la complejidad de un stack robusto.
¿Por qué elegir Astro entre tantos frameworks?
La broma de que cada día nace un framework nuevo es real, pero Astro no llega a sumar ruido. Llega con una propuesta clara: priorizar el contenido y el rendimiento desde el primer archivo que escribes.
Su enfoque está en sitios donde el contenido es el rey. Eso significa proyectos como:
- Landing pages que necesitan cargar rápido y convertir.
- Blogs con mucho texto, imágenes y SEO como prioridad.
- Tiendas e-commerce que no requieren dashboards complejos ni autenticaciones pesadas.
Aquí no hablamos de aplicaciones con paneles administrativos enormes ni flujos de autenticación complicados. Hablamos de sitios web que viven o mueren por la velocidad con la que entregan información.
¿Para qué sirve Astro? Sirve para construir sitios web rápidos enfocados en contenido, como blogs, landing pages y e-commerce, optimizando la entrega al usuario sin cargar procesos innecesarios en el navegador.
¿Qué significa que Astro sea server first?
El concepto server first no es nuevo, viene desde los inicios del desarrollo web. Antes de los frameworks modernos, tecnologías como PHP preparaban la vista en el servidor y se la entregaban lista al usuario.
Astro retoma esa idea. En lugar de mandar al navegador toda la lógica y los recursos para que arme la página, el servidor entrega lo necesario ya preparado. El cliente recibe un sitio liviano, sin el peso de procesar una aplicación completa como ocurre hoy con muchos proyectos en React, Vue o Svelte.
Ese cambio de enfoque es lo que potencia la fluidez y el performance de cada página que construyes [02:30].
¿Por qué se dice que Astro es rápido por defecto?
La frase que circula es directa: debería ser imposible crear un sitio lento en Astro. Suena a reto, y claro que con esfuerzo podrías lograrlo, pero la estructura del framework está diseñada para evitarlo.
La forma en la que Astro organiza los archivos, optimiza recursos y decide qué se ejecuta en el servidor y qué llega al cliente, hace que la velocidad sea una consecuencia natural, no un extra que tengas que perseguir [03:50].
¿Qué tan fácil es empezar con Astro si soy principiante?
No necesitas ser experto para dar tus primeros pasos. Si ya escribes HTML, CSS y entiendes lo básico de JavaScript, tienes lo suficiente para arrancar.
Esto marca una diferencia frente a frameworks robustos como React o Vue, donde la curva de aprendizaje incluye conceptos como estado, ciclo de vida o hooks antes de ver tu primera página real. Con Astro puedes crear una página funcional usando casi solo HTML y CSS, apoyándote en la API del framework para estructurar tus archivos.
¿Necesito saber React para usar Astro? No. Puedes empezar con HTML, CSS y nociones de JavaScript. Más adelante puedes integrar React, Vue u otros frameworks si tu proyecto lo necesita.
¿Qué integraciones puedo sumar a un proyecto Astro?
Astro cuenta con más de 100 integraciones oficiales que amplían lo que puedes hacer sin reinventar nada [05:30]. Entre las más usadas están:
- Tailwind para estilos rápidos basados en utilidades.
- TypeScript para tipado estático y mejor mantenimiento.
- Frameworks de UI como React, Vue o Svelte cuando necesites interactividad puntual.
La idea es que sumes capas conforme tu proyecto lo pida, no antes. Empiezas simple, y cuando llega el momento de incorporar patrones de diseño, arquitectura o librerías específicas, lo haces sin reescribir lo que ya tienes.
Conceptos clave que aparecen en la clase
Para que ubiques rápido las ideas que sostienen el framework, aquí van los términos centrales que te conviene tener claros antes de abrir tu editor:
- Framework all in one: Astro reúne en un solo entorno lo necesario para construir, optimizar y desplegar sitios enfocados en contenido [00:45].
- Contenido como prioridad: el diseño del framework asume que tu sitio entrega información, no una aplicación con estado complejo [01:20].
- Server first: la lógica y la vista se resuelven en el servidor antes de llegar al navegador [02:30].
- Rápido por defecto: la estructura del proyecto fuerza buenas prácticas de rendimiento [03:50].
- Bajo barrier to entry: con HTML, CSS y JavaScript básico ya puedes producir [04:40].
En la siguiente clase verás los requisitos para montar la estructura de un proyecto y dar tus primeros pasos en Astro. ¿Qué tipo de sitio quieres construir primero, una landing page o un blog? Cuéntamelo en los comentarios.