[Astro] Hilo general - Ahora con ViewTransitions

Axtrix

WIP

Astro

Astro es un potente framework que soporta tanto la generación de sitios estáticos (SSG) como el renderizado del lado del servidor (SSR) para ayudarnos a construir sitios web rápidos y basados en contenidos, sin perder de vista la experiencia del desarrollador.

Es ligero, eficiente y flexible, lo que lo convierte en una opción adecuada para crear sitios web ricos en contenido, como blogs, portfolios, documentación y algunos sitios de comercio electrónico.

Por que deberia usar Astro?

  1. Rendimiento: Un sitio web de Astro puede cargar un 40% más rápido con un 90% menos de JavaScript que el mismo sitio construido con el framework web React más popular. Astro convierte la mayoría de tu sitio web en HTML estático rápido, y solo carga JavaScript para los componentes individuales que lo necesitan. Esto se conoce como la arquitectura de "Islas" de Astro, que es clave para su rendimiento rápido por defecto. Fuente (https://docs.astro.build/en/concepts/why-astro/) (https://docs.astro.build/en/concepts/islands/)

  2. Facilidad de uso: Astro está diseñado para ser accesible para todos los desarrolladores web, independientemente de su nivel de habilidad o experiencia pasada con el desarrollo web. Puedes usar cualquier lenguaje de componentes de interfaz de usuario favorito que ya conozcas, como React, Preact, Svelte, Vue, Solid, Lit y varios otros. Fuente (https://docs.astro.build/en/concepts/why-astro/)

  3. Optimización de componentes: Astro te permite controlar cómo y cuándo se renderiza cada componente. Puedes decirle a Astro que solo cargue un componente cuando se haga visible en la página. Si el usuario nunca lo ve, nunca se carga. Fuente (https://docs.astro.build/en/concepts/islands/)

  4. Integraciones: Astro se integra con varios CMS sin cabeza populares y te permite conectar carritos de compras de comercio electrónico. Fuente (https://docs.astro.build/en/guides/migrate-to-astro/)

Conceptos basicos de Astro

Astro introduce varios conceptos que son únicos en comparación con otros frameworks:

  1. Islas interactivas: Astro utiliza un enfoque de "Islas de JavaScript" para la arquitectura de su sitio web. Esto significa que Astro convierte la mayoría de tu sitio web en HTML estático rápido, y solo carga JavaScript para los componentes individuales que lo necesitan. Fuente (https://docs.astro.build/en/concepts/why-astro/)

  2. Hidratación parcial o selectiva: Astro permite la hidratación parcial o selectiva de componentes. Esto significa que puedes controlar cómo y cuándo se renderiza cada componente en el navegador. Por ejemplo, puedes decirle a Astro que solo cargue un componente cuando se haga visible en la página. Si el usuario nunca lo ve, nunca se carga. Fuente (https://astro.build/blog/astro-1-beta-release/)

  3. Lenguaje de componentes .astro: Astro introduce su propio lenguaje de componentes .astro. Este lenguaje está fuertemente influenciado por HTML: cualquier fragmento válido de HTML ya es un componente Astro válido. Pero también combina algunas de nuestras características favoritas tomadas de otros lenguajes de componentes como las expresiones JSX (React) y el alcance de CSS por defecto (Svelte y Vue). Fuente (https://docs.astro.build/en/concepts/why-astro/)

  4. Renderizado en el servidor: A diferencia de otros frameworks que se diseñaron para renderizar en el navegador, Astro se diseñó para renderizar en el servidor. Esto significa que no necesitas preocuparte por conceptos como hooks (React), refs (Vue), observables (Svelte), átomos, selectores, reacciones o derivaciones. No hay reactividad en el servidor, por lo que toda esa complejidad desaparece. Fuente (https://docs.astro.build/en/concepts/why-astro/)

  5. Astro SSR: Astro introduce un enfoque simplificado para el renderizado del lado del servidor (SSR). Con Astro, puedes escribir tu código de servidor de la forma en que funciona en tu mente, libre de las abstracciones innecesarias que vienen con otros frameworks "universales" orientados a SPA. Fuente (https://astro.build/blog/experimental-server-side-rendering/)

NSFW
3
Axtrix

reservado primo

liebgott

Buen hilo y mejor framework

Usuarios habituales

  • liebgott
  • Axtrix