Lemoncode TV

01. Conceptos Astro

Bienvenido a esta serie de tutoriales sobre Astro, un framework moderno para construir sitios web rápidos y eficientes.

El framework buena gente

Si quisieramos definir Astro en una sólo frase, podríamos decir que, es "el framework buena gente"...

¿Por qué? Porque se integra muy bien con otros frameworks y librerías de Front End, como Alpine, Solid, React, Preact, Svelte y Vue, No te obliga a usar uno en particular, sino que los integra de forma fluida.

Además, soporta Server Side Rendering (SSR), Server Actions, Server Islands, y puedes desplegar fácilmente estas interacciones de servidor, tanto en entornos como Node.js, Vercel o Netlify.

¿Que nos permite hacer Astro?

SSG, SSR y Híbrido

Por un lado, tenemos SSG (Static Site Generation), que nos permite generar sitios estáticos. ¿Para qué sirve esto? Para construir sitios modernos, basados en componentes, que pueden obtener datos de un headless CMS u otra fuente, y luego generar archivos HTML y CSS listos para servir. Esto da como resultado sitios súper rápidos, fáciles de desplegar, con excelente SEO.

Y lo mejor: Astro permite añadir islas de interactividad. ¿Qué significa eso? Que puedes incluir componentes interactivos hechos con React, Vue, Svelte, Lit, etc., y estos se cargan de forma independiente, sin tener que enviar todo el JavaScript de la aplicación al cliente. Solo se carga lo necesario.

Por otro lado, tenemos SSR (Server Side Rendering), que permite renderizar el contenido en el servidor antes de enviarlo al navegador. Esto es útil para sitios que necesitan mostrar información actualizada al instante y mantener un buen posicionamiento en buscadores.

Y finalmente, Astro también permite una aproximación híbrida: combinar partes estáticas y dinámicas en un mismo sitio. Así puedes aprovechar lo mejor de ambos mundos.

Interactividad

Astro también ofrece herramientas modernas para añadir interactividad sin sacrificar rendimiento:

• Client Islands: componentes interactivos que se cargan y ejecutan solo en el cliente, de forma independiente. Esto mejora la eficiencia y la experiencia del usuario.

• Server Islands: componentes que se renderizan en el servidor y se envían al cliente ya como HTML. Esto permite priorizar el contenido más importante, mostrando rápidamente lo esencial mientras se pospone la carga de elementos más pesados o secundarios. Así, mejoramos el tiempo de carga inicial, el SEO y la experiencia del usuario.

• Server Actions: funciones que se ejecutan en el servidor y se pueden invocar desde el cliente para, por ejemplo, manejar formularios o acceder a bases de datos sin exponer lógica sensible.

Todo esto te puede parecer ahora algo muy abstracto, pero ya nos dejamos la teoría a un lado y nos ponemos manos a la obra a desarrollar un ejemplo, verás que con código todo empieza a tener sentido.

En el proximo vídeo, te presentamos la aplicacíon de ejemplo que vamos a desarrollar a lo largo de este tutorial.