Qué hay de nuevo en Astro

Muy bien. Gracias a todos. Gracias por tenerme aquí. Muy bien. Hablemos del futuro, el futuro de JavaScript y React y un poco de Astro. Mi nombre es Fred. Soy uno de los co-creadores del marco web Astro. Y esta es una charla sobre el futuro de Astro, pero vemos que está tan vinculado a la plataforma web. React es uno de los marcos de trabajo más grandes que puedes usar con Astro, así que somos un marco web muy genérico y agnóstico. Pero Astro y React son perfectos, hermosos. Quiero hablar del futuro de React. Y tengo algunas cosas emocionantes para compartir, algunos anuncios geniales. Hemos estado tuiteando toda la semana sobre algunas de estas cosas. Quiero adentrarme en algunas de ellas, compartir algunas cosas nuevas que aún no se han hablado. Y no importa en qué pila tecnológica te encuentres, esto debería ser muy emocionante. Hay cosas realmente interesantes del futuro de la web que están sucediendo ahora mismo en los navegadores, en los marcos de trabajo por todas partes. Estoy emocionado de adentrarme en ellas. ¿Suena bien? ¿Deberíamos empezar? Muy bien.

Tenemos un par de principios de diseño en el marco web Astro. Uno de mis favoritos es esta idea de impulsar la web hacia adelante. Hay muchos marcos de trabajo web por ahí. No queremos ser solo otro de ellos, otra forma de usar React o Celt o Vue. Queremos ser algo que desafíe las mejores prácticas e ideas.

Para dar un ejemplo de esto, cuando comenzamos con Astro, estábamos buscando. Y una de las cosas que era muy frustrante en ese momento, esto fue hace un tiempo, era esta idea de rendimiento. Sabes, todos los marcos de trabajo web, incluido Next.js, incluido, Dios, ¿cuál era, ya sabes, create React app especialmente, tenían sus grandes ejemplos iniciales, sus grandes blogs, sus grandes guías de inicio que se veían bien a simple vista, el rendimiento estaba ahí. Pero luego en el mundo real, todos luchaban por cumplir esa promesa. Entonces, el rendimiento en el mundo real y el rendimiento teórico son muy diferentes.

Cuando estás enviando mucho JavaScript al cliente, es realmente difícil. Tu punto de partida ya es tan alto que tienes muy poco margen para maniobrar y construir tu propio código cuando el marco de trabajo ocupa gran parte de eso. Cuando estás construyendo tu interfaz de usuario como una aplicación de JavaScript en lugar de una página de HTML estática y rápida con componentes interactivos, no estamos hablando de una web estática y muerta, sino de la idea de enviar una aplicación en lugar de una página, en la práctica, se vuelve muy difícil hacer que una aplicación tenga el mismo rendimiento que una página de HTML puede tener.

Entonces, vimos este problema donde en las aplicaciones del mundo real, todos luchaban por lograr un buen rendimiento. Nadie aquí está por encima del 50%. ¿Verdad? Incluso uno de cada cinco sitios tiene buen rendimiento, cuatro de cada cinco no lo tienen. Ese es un lugar realmente aterrador para estar. Y vimos este problema no como un problema de que los desarrolladores no se tomen en serio el rendimiento. Sabes, no es algo en lo que todos tengan que ser expertos en rendimiento. Si ese es el punto de partida para la web, es un lugar bastante difícil para comenzar. Vimos esto como un problema de herramientas. Las herramientas pueden hacer un mejor trabajo, usamos este término, el pozo del éxito, empujándote hacia el pozo del éxito. Deberías caer en el éxito, no tener que luchar para alcanzarlo.

Entonces construimos Astro en torno a esta idea de rendimiento. Implementamos una nueva arquitectura llamada Islas, que es increíblemente eficiente. Elimina el JavaScript innecesario y hace que tu página sea más rápida. Y ahora, después de años de adopción en el mundo real, estamos muy por encima del punto de partida en comparación con cualquier otro marco de trabajo de JavaScript. Esta idea de JavaScript de pila completa es como una historia súper unificada, pero no tiene que significar todo JavaScript, JavaScript del cliente, JavaScript del servidor. Todo se envía al usuario. Podemos ser mucho más inteligentes en la forma en que entregamos eso. Y los resultados hablan por sí mismos. Ni siquiera somos los más pequeños o los segundos más pequeños en este gráfico. Hay muchos datos del mundo real que muestran que cuando eliminas JavaScript y te vuelves muy inteligente en la forma en que entregas tu sitio, incluso si estás usando React, incluso si estás usando un marco de trabajo, cualesquiera que sean tus herramientas favoritas, aún puedes tener esas en la experiencia del desarrollador, pero obtener algo al final del día que es mucho, mucho más rápido, una experiencia de desarrollador y de usuario mucho mejor. Ese es nuestro objetivo con Astro, en última instancia, especialmente para los sitios de contenido. El contenido es muy importante para la web. Ese es nuestro enfoque principal. Si estás construyendo un sitio de marketing, un blog, un sitio de comercio electrónico, si el propósito principal de tu sitio es entregar contenido al usuario, ahí es donde Astro realmente puede marcar la diferencia. Así que si no lo has probado, esa arquitectura de islas, ese es el origen original de Astro, desafiando la forma en que los marcos de trabajo construyen sitios. El año pasado, nos enfocamos en el contenido como un primitivo para Astro. El contenido ha sido un primitivo en los generadores de sitios estáticos desde siempre. Gatsby tenía el contenido de GraphQL. Esta no es una idea nueva, pero queríamos llevar esto a la era moderna, ¿verdad? TypeScript, no GraphQL, validación de esquema, validación de metadatos. Incorporamos el contenido en la plataforma del marco de trabajo Astro el año pasado, o hace un par de años. Y por último, las transiciones de vista. Si no has visto las transiciones de vista, te sorprenderán. React, Astro, no importa. Esta es una de mis tecnologías favoritas que ha surgido en la plataforma web. Así que si no has tenido la oportunidad de ver esto, lo vamos a explorar porque es realmente genial. Y hay cosas realmente emocionantes que están sucediendo, no solo este año, sino literalmente esta semana, en las que vamos a profundizar. Así que las transiciones de vista, comenzamos a adoptarlas el año pasado.

Entonces, las transiciones de vista, comenzamos a adoptarlas el año pasado. Construimos una API en torno a ella. Y ahora, a medida que los navegadores están adoptando este estándar, está comenzando a habilitar cosas realmente geniales. Entonces, esto es como un resumen de las tres grandes apuestas que hemos estado tomando. Es un nuevo año. ¿Cuál es nuestra próxima gran apuesta? ¿Es AI? ¿Es cripto? ¿Estamos construyendo un NFT? No, vamos al metaverso. La web es el metaverso. Aquí es donde vamos ahora. Cada sitio web flotando a tu alrededor. Ahora, esa no es nuestra visión para el futuro. Pero creo que hay un futuro web realmente emocionante que está tomando forma aquí.

A medida que pensamos en cómo será esta década, no se trata solo de Astro. Es solo esta idea de que los sitios web impulsados por contenido obtengan la experiencia optimizada para ellos. Estas tecnologías de las que he estado hablando, esta idea de islas y contenido y transiciones de vista, no son solo características de Astro. Estas son primitivas para construir en la web que creemos que merecen no solo un lugar en la mesa, sino que serán las que impulsen la próxima década de desarrollo web, especialmente para sitios impulsados por contenido. Entonces, si estás construyendo una aplicación y quieres enviar una gran aplicación de JavaScript, es una gran idea para ciertos casos de uso. Paneles de control muy estatales, eso es genial. Pero para la mayor parte de la web, realmente creemos que esta arquitectura, estas primitivas, estas características del navegador son realmente, realmente emocionantes y van a cambiar por completo la forma en que vemos la web. Hemos estado trabajando en un par de cosas diferentes al respecto. Estamos invirtiendo en tres primitivas diferentes en torno a islas, contenido y transiciones de vista. Y eso básicamente va a definir nuestra hoja de ruta para el próximo año. Tenemos una hoja de ruta abierta, puedes consultar estas cosas, pero estas son las cosas que nos emocionan. Vamos a hablar sobre cómo se relacionan con React y Astro y todas estas cosas emocionantes que puedes hacer con ellas.

Entonces, comencemos con las transiciones de vista. Mencioné que esto se siente como magia. Es magia. Si has visto esta demostración antes, esta es una de mis favoritas, porque piensas en Spotify, piensas en una aplicación pesada, ¿verdad? Piensas en JavaScript, Electron, ya sabes, tiempos de carga largos. Pero en realidad, esto es principalmente HTML. HTML y CSS, obviamente tienes que darle estilo. Pero no hay JavaScript ejecutándose aquí para alimentar estas animaciones. Eso puede parecer magia. El navegador realmente asume esa responsabilidad por ti. Estas son navegaciones de página completa. Si haces clic en eso, imagina que simplemente haces clic en cualquier otro enlace en la página. Normalmente, esto sería una limpieza completa y un reinicio completo, una nueva página. Pero el navegador ahora tiene la capacidad de no solo hacerlo sin problemas, sino también de animar y hacer la transición entre páginas. Entonces, esto es HTML, CSS. Eso es todo. Impulsado por el navegador. Puedes usar esto con cualquier framework, como React. Puedes usar esto con cualquier nivel inferior, como Astro, Next.js. Esta es una tecnología realmente genial. Pero lo que nos diferencia es que para Astro, esto es algo que no teníamos antes, ¿verdad? Con Next.js, puedes pensar en tu sitio como una aplicación web donde has enviado todo este JavaScript. Uno de los beneficios es que ahora puedes ejecutar esas transiciones del lado del cliente. Porque Next.js se hace cargo del enrutador del navegador. Entonces, cuando haces clic en un enlace en Next, tienes un componente de enlace especial. Eso le dice a Next.js que ejecute esa animación, que ejecute esa transición de página. Súper poderoso. Pero, nuevamente, tenías que enviar mucho JavaScript para llegar allí. Esto es algo que Astro no tenía antes.

Al no enviar ese JavaScript como base, nunca tuvimos realmente esta capacidad. Y pensamos un poco, ¿deberíamos construir esto? ¿Deberíamos asumir el costo del JavaScript para hacerlo? Hay Hotwire, hay todas estas bibliotecas realmente geniales. Pero todas son realmente complicadas, ¿verdad? Todas terminan asumiendo la responsabilidad de la navegación de página del navegador. Eso es lo que hace el navegador. Eso es como la tecnología central del navegador. Así que fue realmente difícil. Y los navegadores realmente nos salvaron, para ser honestos. Esta es la característica más genial. Y no tuvimos que hacer nada. Construimos una API simple que se conecta a esto. Entonces no tienes que escribir mucho del CSS tú mismo. Si quieres hacer una transición de fundido, un deslizamiento, algo genial, puedes programarlo o simplemente identificarlo por nombre. Te proporcionamos estos directores de transición que básicamente envuelven todas las preocupaciones de accesibilidad y el estilo de CSS. Si no te gusta trabajar con keyframes y animations, no tienes que hacerlo. Te damos muchas de estas primitivas de forma gratuita.

Pero al final del día, solo le estamos diciendo al navegador qué hacer. Así que hay cosas realmente geniales aquí sobre cómo lo hicimos. Pero lo más importante es ese último punto, para hacer esto de manera compatible con versiones anteriores, tuvimos que ser un poco creativos. Básicamente tuvimos que hacerse cargo de ese enrutador. Esa cosa de la que dijimos que los navegadores son buenos y que nunca haríamos, lo hicimos. Y esto fue como una gran traición a la esencia de Astro. Esta idea de no hacer eso para hacerlo por esta característica se sintió un poco incómodo. Sabes, agrega complejidad. Agrega JavaScript. Pero la gran apuesta fue que esto sería una solución a corto plazo. A medida que los navegadores adoptaran esto, a medida que cada vez más personas tuvieran esta tecnología en su navegador, podríamos comenzar a ver este polyfill, básicamente este enrutador, desaparecer, derretirse. Podrías eliminarlo y algún día el navegador podría ejecutar estas transiciones sin JavaScript para tu código de React, tu HTML, lo que sea. Tendrías esa cosa de cero JavaScript. Esa fue nuestra apuesta. Estábamos apostando por hacia dónde se dirigía el futuro y esperando que algún día los navegadores lo alcanzaran.

Y eso es lo que ha cambiado esta semana. Si estuviera dando esta charla en cualquier otro momento, sería una especie de advertencia extraña. Pero esta semana, tanto Chrome como Edge admiten esta transición de cero JavaScript en el navegador. Así que puedes usar esto hoy. Sin versiones de prueba, sin betas. Esto está disponible en los navegadores de los usuarios a un ritmo acelerado a medida que se implementa. Hay más navegadores en camino. Safari acaba de lanzar un soporte más limitado para esto. Pero esto está aquí. No solo está por venir. De las tres cosas de las que voy a hablar, esta está aquí hoy. Y eso es todo lo que necesitas hacer. Son un par de líneas de CSS. Es esta nueva regla de transición de vista, navegación automática. Esto le dice al navegador que has optado por esta función. Entonces, si nunca quisiste usar esto, nunca quieres volver a pensar en las transiciones de vista, está bien. Si quieres optar por ello, este es el CSS que necesitas. Debe existir al inicio y al final de esa transición. Si haces eso, básicamente le dices, sabes, aquí es de donde vengo, aquí es donde voy.

Ambos han optado por ello. Hagamos lo genial. Hagamos la animation genial. Si has usado Astro antes, esta era nuestra capa de compatibilidad hacia atrás. Simplemente elimínala. Ahora estás en la funcionalidad nativa. No más Astro code, no más enrutador spa. Todo esto es impulsado por el navegador. Y nuevamente, cero JavaScript. Si miras las herramientas de desarrollo, cero JavaScript. Si miras la pestaña de red real, esto es una navegación de página completa cada vez. Vas de una página a otra y el navegador hace el trabajo duro. Esto está disponible ahora. Está llegando a más navegadores.

Esto está aquí. Probablemente esta sea una de las primitivas del navegador más emocionantes que han surgido. Si piensas en cómo ha existido la web durante décadas. Haciendo clic en un enlace, navegando de una página a otra. Estas son cosas fundamentales que no han cambiado en décadas y de repente surge esta nueva y enorme tecnología. Creemos que esto cambiará por completo la forma en que diseñas para la web. Y lo hace de una manera que realmente respalda la arquitectura basada en islas de Astro. Así que échale un vistazo.

Repasaré rápidamente las colecciones de contenido. Porque creo que esto es realmente genial. Es una de las cosas en las que nos hemos basado, esta idea de poder gestionar contenido. Comenzamos con markdown local. Porque trabajamos en sitios de documentación. Trabajamos en blogs de desarrollo. Markdown es genial. A los desarrolladores les encanta. MDX. Todo eso es genial. Pero al implementar esta primitiva en Astro, tuvimos algunas limitaciones. Solo funciona para contenido local. Entonces, si tienes un CMS o una API remota, estás fuera de suerte. Imponemos una estructura de carpetas rígida. Esto es genial si sigues las reglas, obtienes todas estas características agradables. Habilitado para TypeScript. Validación de metadatos. Si no sigues las reglas, no obtienes la característica. Es bastante rígido. Y a medida que comenzamos a scale esto, nos dimos cuenta de que al mantener todo esto en memoria, se convierte en un verdadero problema cuando implementas esto en un sitio de SSR. Si tienes una compilación estática, te sorprenderá lo bien que escala esto. Si estás en serverless, cada vez que tienes un inicio en frío, se carga una gran cantidad de contenido en memoria. No es un buen lugar para estar. Así que teníamos estas limitaciones. Intentamos construir alrededor de ellas y eventualmente nos dimos cuenta de que fue un buen comienzo. Pero lo que realmente queríamos era esta idea de una capa de contenido más profunda. Algo que pudiera gestionar contenido remoto y local en un solo lugar. Nos hemos referido cariñosamente a esto como Gatsby, las partes buenas, porque Gatsby tenía muchas ideas geniales aquí.

¿Y podemos explorar esto sin asumir la capa de GraphQL? ¿Podemos usar un enfoque basado en TypeScript, generar tipos automáticamente, todas estas cosas emocionantes que te permiten trabajar con tu contenido, tus componentes de React, tu front-end, todo impulsado por una capa de contenido unificada? Entonces, si alguna vez has trabajado con MDX en un framework web, esto es algo que admitimos hoy en día, pero esta es una API mucho más adaptable. Esta es la idea de realmente agrupar una carpeta. Si ahí es donde vive tu contenido, genial, apúntalo donde quieras. Tal vez tengas un solo archivo, un gran arreglo de JavaScript o JSON, miles de entradas. No tienes que dividirlos en archivos individuales. Apúntanos al archivo, nosotros haremos el resto. Y tal vez solo quieras cargar tu contenido desde algún lugar totalmente personalizado, ¿verdad? Quieres codificarlo tú mismo, generarlo automáticamente. Quieres obtenerlo desde alguna API externa. Lo que quieras hacer, es una API de datos de bajo nivel para extraer datos en la capa de contenido para que puedas tener acceso a ellos. Y por último, muy adaptable. Así que cualquier cosa que puedas imaginar, Storyblok, tu CMS favorito, tu API favorita, Instagram, Facebook. Puedes obtener este contenido desde cualquier lugar. Imaginamos un ecosistema totalmente adaptable de estos componentes. Disculpa, estos cargadores que existen en NPM. Los incorporas en tu sitio y estás listo. Así que esto es realmente emocionante. Ni siquiera he rascado la superficie de lo que es posible aquí. Pero si estás trabajando con contenido en la web, sabes que puede ser un dolor de cabeza total. Todas estas diferentes fuentes de datos, todos estos diferentes CMS. ¿Cómo los unes todos en una capa de datos unificada, una capa de contenido unificada? Eso es lo que vemos que viene en la capa de contenido para Astro. Cosas realmente emocionantes. Aún es temprano. Todavía lo estamos explorando. Pero si tienes problemas para gestionar tu contenido, esta es una característica realmente genial para revisar en nuestra hoja de ruta y que actualmente se está desarrollando en el equipo hoy en día.

Muy bien, por último, hay una característica realmente genial para compartir. Es una arquitectura de islas redondas. Si no estás familiarizado, lo expliqué brevemente al principio. Básicamente, es esta idea de HTML estático. En lugar de enviar una aplicación JavaScript, envía una página. Y lo que Astro hace es eliminar todo ese JavaScript no utilizado. Entonces, si usas React para construir todo tu sitio, eso es genial. Pero muchos sitios caen en este agujero. Solo un par de esos componentes realmente necesitan ser interactivos, ¿verdad? Un botón de compra, un carrito, un carrusel de imágenes. Estas son cosas que son interactivas. El resto de la página, estática, ¿verdad? No necesita cambiar. Eso es la arquitectura de islas. En su núcleo, es esta idea de dividir tu página en estas islas de complejidad conceptual. Estáticas, simples. Interactivas en el cliente, un poco más complejas. Vamos a enviar React solo para esos componentes del cliente. Optimiza completamente tu rendimiento. Mantiene las cosas estáticas, lo que significa rapidez. Es realmente poderoso, especialmente para sitios de contenido.

Ahora, cuando pensamos en lo que enviamos al usuario, eso es una gran parte. Si recuerdas ese tipo de gráfico, nuestra historia de rendimiento se trata realmente de optimizar lo que envías, pero hay otra parte de la ecuación, que es cómo lo envías, ¿verdad? Si envías una página HTML estática, obtendrás un gran rendimiento, pero es estática, ¿verdad? No va a cambiar mucho. No puedes ponerlo en la CDN si tienes tu cara mostrada en la esquina. El contenido personalizado no se puede almacenar en caché de la misma manera que el contenido estático. Pero cuando te vuelves personal, cuando usas contenido dinámico, estás asumiendo este costo de rendimiento. Tenemos que ir a un centro de datos. Tienes que ir y golpear eso. Tenemos que cargar eso desde algún lugar y terminas con este intercambio realmente difícil. Contenido estático y de alto rendimiento, pero sin personalización, sin datos dinámicos, o personalizado, pero ahora es un poco más lento. Tienes que obtener esos datos desde algún lugar que no sea una CDN distribuida globalmente. Así que hay todos estos intercambios diferentes aquí. Esto siempre ha sido un problema realmente difícil. Si has escuchado sobre otros frameworks, Next.js ha estado usando suspense y pre-renderización parcial. Esta es nuestra versión, que en realidad se basa en islas de servidor. Esta idea de una isla que no es solo un componente del cliente, sino que en realidad es un componente del servidor. Cada componente de Astro se puede pensar como un componente del servidor. Hacemos este renderizado. Renderizamos HTML, pero lo que esto desbloquea es la idea de diferir ese renderizado. Al igual que con las islas del cliente hoy en día, vamos a agregar una directiva. En este caso, es la directiva de diferimiento del servidor, y lo que le dice a Astro es básicamente que no renderice esto como parte de la página inicial. Rendéralo de manera diferida. Así que envía el fallback estático, envía el contenido de la página. Cualquiera que sea el componente de React que vaya a tener su estado de carga de esqueleto, envíalo de inmediato. Y lo que eso realmente significa es que se puede almacenar en caché, ¿verdad? Esto se puede almacenar en caché en toda la página en una CDN global. La página se carga, vamos a buscar ese contenido dinámico ahora después de la carga de la página, y una vez que regrese de cualquier punto final de API más costoso, lo vamos a unir nuevamente a la página. Todo esto se hace completamente en segundo plano para ti, así que todo lo que necesitas pensar es cuál es el fallback, cuál es el contenido real. Astro se encarga del resto y lo une automáticamente.

Un ejemplo rápido de cómo se ve esto. Puedes ver la carga inicial de la página, 20 milisegundos, ¿verdad? Eso es una CDN global. Súper, súper rápido, no importa dónde te encuentres en el mundo. Esto está impulsado por Vercel, pero cualquier plataforma de alojamiento va a tener esta funcionalidad de CDN. Eso se debe a que esta página es estática.

Aunque hay mi cara o mi pequeño avatar en la parte superior derecha, el esqueleto de la página es estático. Lo que Astro ha hecho es tomar ese componente diferido y enviarlo a un punto final separado. Así que hemos hecho el trabajo de diferirlo, enviarlo como un punto final separado. He agregado un retraso falso aquí solo para ilustrar cómo se vería esto en una conexión más lenta, en una generación de contenido más costosa. Y todo eso se cargará por separado. Para los sitios de contenido en los que Astro se enfoca tanto, esta historia es genial porque la mayoría de su contenido debería cargarse rápido. Pero de vez en cuando, tienes esa experiencia personalizada. Reseñas en un sitio de comercio electrónico o tu avatar en una barra de herramientas como esta. Esto es perfecto para este caso de uso. Esta es nuestra respuesta que mencioné a todas estas cosas realmente geniales. Hemos estado observando el ecosistema de React. Hemos estado trabajando con el ecosistema de React y en nuestro propio soporte. Han estado explorando mucho durante la última década en suspense, streaming, rerenderización parcial. Para nosotros, esta es nuestra respuesta construida de una manera mucho más genérica. Entonces, esto no está construido en ningún marco en particular. Está disponible para todos. No está construido solo para un proveedor de alojamiento. Está construido para todos. Esto es realmente, realmente poderoso y funciona con cualquier CDN. Oh, disculpen. Esto es realmente genial. Es temprano. Todavía estamos probando esto. Tenemos prototipos y demos. Tuitearemos mucho más sobre esto en las próximas semanas. Esta es una historia de rendimiento realmente genial. No solo se trata de lo que envías al usuario, sino de cómo lo envías. Combina esto con la historia de la isla del cliente que ya tenemos. Obtienes un sitio súper optimizado con muy pocas limitaciones en lo que puedes hacer como desarrollador.

Muy bien. Transiciones de vista, capa de contenido, islas del servidor. Estas son las tres cosas importantes en las que estamos trabajando este año. Las transiciones de vista ya están aquí. Así que táchalo de la lista. La capa de contenido y las islas del servidor estarán disponibles próximamente. Así que échales un vistazo. Tenemos una hoja de ruta abierta. Echa un vistazo a la hoja de ruta. Estas son las tres cosas que consideramos fundamentales para el futuro de Astro y las tecnologías con las que todos deberían experimentar, sin importar cuál sea tu conjunto de tecnologías. Así que si aún no has probado Astro, échale un vistazo. Síguenos. Y gracias de nuevo por tenerme aquí. Gracias.

Ha habido un poco de interés en las transiciones de vista. Muy emocionante. Demostración muy genial. La gente quiere saber. Aún no son compatibles con Firefox. Quiero dar soporte a más navegadores. ¿Todavía necesito importar un paquete? ¿Necesito hacer un polyfill? ¿Cuál es nuestro plan de producción aquí? Muy buena pregunta. Durante el último año, hemos tenido esta historia de transiciones de vista cuando ninguno de los navegadores tenía un soporte completo. Cada navegador está llegando gradualmente. Safari, por ejemplo, anunció recientemente el soporte para esto, se puede considerar un nivel uno de la API. JavaScript. Así que no realiza la transición completa de la página por ti, pero nos brinda una API de JavaScript a nosotros, los autores del framework, para controlar esto básicamente. Eso fue el enrutador que mencioné. Los navegadores están adoptando esto gradualmente. Han estado haciéndolo gradualmente durante el último año. Ahí es donde entra en juego nuestro componente de transición de vista. No importa qué navegador tenga tu usuario, básicamente pueden colocarlo en la página y nosotros nos encargaremos de hacer todo el trabajo para hacerlo compatible con versiones anteriores. Básicamente, nos encargamos de ese trabajo por ti como usuario del framework. Y luego, a medida que los navegadores adopten eso, cambian al CSS nativo, ahí es donde optas por el navegador completo. Así que si no estás listo para el futuro, si quieres esperar un poco, está bien. La historia compatible con versiones anteriores la manejamos nosotros. La transición nativa hacia donde está el navegador en el futuro, eso es lo nativo del CSS que mostré anteriormente. Nosotros hacemos todo el trabajo por ti, es una gran respuesta a esa pregunta. Esa es mi respuesta favorita. Me gusta mucho eso. No te preocupes por eso. Te tenemos cubierto.

Eso es realmente genial. Hay un par de cosas compatibles con versiones anteriores. Sí, sí, sí, sí. Fred de Anonymous. ¿La hidratación de la isla se transmite o es una solicitud HTTP separada? Y ¿puedes almacenar en caché el HTML inicial en un CDN y hacer que la isla golpee tu servidor, lo cual creo que mencionaste un poco. Sí, un poco. Creo que eso es lo más importante, especialmente cuando lo comparamos con donde está el ecosistema de React ahora. Mucho enfoque en el streaming. Mucho enfoque en básicamente el mismo tipo de personalización que mostramos.

Next.js aborda esto desde la perspectiva de una secuencia de solicitudes. Por lo tanto, obtienes esa personalización en la misma solicitud. Es muy poderoso. Es realmente difícil para el proveedor de alojamiento admitir eso. Entonces, muchas de las CDN, ¿verdad?, son globales y estáticas, pero no tienen esa funcionalidad incorporada. Estamos construyendo para esa CDN de una manera que hemos visto en las pruebas de rendimiento no marca una gran diferencia. Obtienes un tipo de soporte más agnóstico y luego obtienes esencialmente esa segunda solicitud que se realiza después de que se carga la página. Es solo un enfoque diferente para el mismo problema. Lo encontramos realmente convincente, especialmente para sitios de contenido y lo que están optimizando, que es una carga de página inicial más rápida. Necesitan métricas web vitales sólidas. Vemos esto como algo bastante competitivo y comparable allí. ¿Es algo que te gustaría ver admitido por los proveedores de alojamiento?

Bueno, eso es lo interesante. Para nosotros, básicamente todos lo admiten. Así es como funciona la web. No se necesita una funcionalidad de transmisión adicional. Creemos que la transmisión es muy poderosa. Admitimos la transmisión. Ya tenemos APIs realmente geniales en torno a suspense. Así que esto es algo en lo que nos importa mucho. Pero para esta función, encontramos que cuanto más simple, mejor. Nuevamente, déjanos hacer más por ti. Déjanos poner menos obstáculos en el camino. Lo simple es agradable. Lo simple es agradable. Nos encanta eso. Estamos creando clichés y cosas cursis. Lo simple es agradable. Deberíamos hacer camisetas. Gracias.

Fred, cuando... Oh, esto es interesante. Un poco más de educación sobre cuándo se carga el paquete de React cuando se usa en Astro, ¿cómo funciona eso? Si no has visto nuestra arquitectura de islas y tienes curiosidad por aprender más, nuestros documentos tienen mucha información al respecto. Es un modelo realmente genial donde, básicamente, porque has dividido tu sitio en componentes, podemos optimizar tu sitio por componente. Imagina que tienes un carrusel muy pesado en tu página. Básicamente, puedes decirle a Astro: `Oye, esto no es lo más importante. Es un carrusel. Es pesado. No quiero que esto afecte realmente mi página. Diferir esto para hidratar. Carga todo el paquete solo cuando se vuelva visible en la página`. El resultado es que básicamente tienes un control total sobre cuándo se carga ese paquete. Puede ser de inmediato porque necesitas que ese primer componente sea lo más interactivo posible y lo más rápido posible. O puedes decir: `Uso React para cosas realmente no importantes. Es más como un adorno. Diferirlo cuando el navegador esté inactivo. Diferirlo cuando se vuelva visible`. Mucho más control sobre toda la página en función de cada componente. Así que hay cosas realmente geniales que se unen. Me sorprende. Eso es importante.

Estamos entrando en un territorio un poco más filosófico aquí. Y en realidad voy a mezclar algunas de las preguntas. Una persona preguntó, todos los frameworks se están volviendo cada vez más similares a medida que pasa el tiempo. ¿Crees que alguna vez alcanzaremos la singularidad de los frameworks? Y una pregunta similar, que es más o menos para qué proyectos es bueno Astro y para cuáles no lo es. ¿Y ha cambiado lo suficiente recientemente como para convertirse en un competidor de Next o Remix? Bueno, hay un panel más tarde hoy. Voy a promocionar mi propio panel. Creo que hay un panel futuro de frontend sobre esa pregunta. Échale un vistazo. Sí, eso es más tarde hoy. Singularidad de los frameworks. Creo un par de cosas. Creo que todos están explorando las mismas cosas en torno a la tecnología. Como el streaming es realmente importante en este momento. Señales. Hay estas tendencias que fluyen a través de nuestra industria y luego todos los frameworks lanzan su respuesta a ellas. Creo que algo que distingue a Astro es que, ya sabes, puedes verlo en nuestro lema. El marco de trabajo web para sitios impulsados por contenido. Ese es un enfoque que nadie más realmente comparte. Si miras a los demás, es mucho, no quiero decir esto de ninguna manera de manera irrespetuosa. Es mucho como, ya sabes, el marco de trabajo web moderno o el marco de trabajo para desarrolladores geniales. Es mucho como muy genéricamente genial y moderno. Pero nosotros tenemos este enfoque real en si estás construyendo un sitio de contenido, queremos ser los mejores. Así que el contenido es el rey. Otro gran cliché. Exactamente. No sé. Creo que ahí es donde es como, creo que lo que nos distingue es que estamos haciendo cosas que están optimizadas para esa historia donde otros no lo hacen. Creo que eso nos distingue. Creo que eso nos da algo único. ¿Y crees que seguirás en esa dirección y realmente lo optimizarás en lugar de intentar más profundidad primero? Sí. Creo que realmente queremos conquistar eso, porque creo que ahí es donde, especialmente si miras la última década, las aplicaciones y JavaScript y las SPAs, fueron realmente, realmente geniales para las aplicaciones. Y el sitio de contenido quedó un poco atrás. Fue mucho más como, oh, eso es algo que no nos importa. O como, oh, tienes estos generadores de sitios estáticos como Hugo. Estás bien. No necesitas nada. Y para nosotros, eso no era realmente adecuado. Queríamos usar JavaScript moderno. Queríamos usar React. Y queríamos encontrar una herramienta que pudiera combinar esas dos cosas. Eso es muy genial. Es interesante cuántas preguntas eran como, ¿cuál es el caso de uso? ¿Para qué es mejor? ¡Y es contenido, amigo! Camiseta. Esto es interesante, un poco fuera de las cosas específicas de las que hablaste. Alguien preguntó cuál es la hoja de ruta para Astro Studio. Buena pregunta. ¿Hay algo que puedas compartir? Astro Studio es nuestro intento de jugar con algunas primitivas de nivel superior. Entonces, una base de datos, como un host de imágenes. ¿Podemos construir estas cosas en Astro de manera que básicamente cualquier desarrollador de Astro, tan pronto como lo desee, tenga una base de datos? Como está en la API. Está conectado a un backend. Eso es lo que estamos explorando allí. Es muy temprano.

Estas son cosas realmente geniales. Pero construir un backend y una infraestructura de alojamiento es realmente difícil. Así que es temprano. Estamos jugando con eso. Pero sí, es súper emocionante. Creo que cada framework, Laravel ha mostrado muchas cosas geniales allí. Como frameworks, a medida que se mueven al backend, creo que el siguiente paso natural es pasar a algunas de estas primitivas de alto nivel que son difíciles de hacer bien. Pero cuando las haces bien, es una base de datos. Es lo que impulsa tus aplicaciones. Hay cosas realmente geniales y emocionantes allí.

¿Sabes, creo que ese podría ser el primer reconocimiento de Laravel que escucho en una conferencia de React en mucho tiempo. Eso es una señal de algo. No sé qué, pero definitivamente es una señal. Quiero decir, es interesante porque es como la dirección que estamos tomando comienza a traerlo más a la conversación. Tu pregunta anterior sobre hacia dónde se dirigen los frameworks. Creo que eso es una gran parte de esto. Creo que todos están explorando esa misma pregunta de como, wow, ahora todos estamos haciendo cosas de backend del servidor. ¿Cuál es la historia de la base de datos? Y eso es donde Laravel ha estado durante décadas ahora. Una década.

Esto es un poco también un enfoque futuro. ¿Hay algún enfoque específico en SEO y alguna idea nueva de Astro en ese sentido? Es contenido, amigo. Sí, el SEO es algo en lo que realmente nos importa. Trato de pensar si tenemos algo nuevo relacionado con eso. Gran parte de nuestro enfoque está en la capa de contenido. Así que gestionar tu contenido. Gran parte de lo que es SEO, ya sabes, lo vemos como una historia de rendimiento. Google premia los sitios rápidos y castiga los sitios lentos. Y darte las herramientas para mejorar tu SEO, asegurarte de que tus etiquetas meta, las auditorías de accesibilidad y todas esas cosas realmente ayuden. Pero sí, eso es algo en lo que definitivamente nos importa.

Una pregunta más para imaginar el futuro aquí. ¿Qué característica imaginaria de HTTP 4 te gustaría ver en el futuro, idealmente ayudando a la visión de Astro, si pudieras elegir? Esa es una muy buena pregunta. No lo sé. HTTP 25. Si siguen apareciendo más cosas como transiciones de vista, estoy feliz. Me encanta ver cómo el navegador comienza a pensar en sí mismo más como una plataforma nativa para experiencias de usuario realmente geniales y no solo como, servimos HTML. Aquí tienes. Me encanta eso como una tendencia. Así que más cosas como esa, supongo. No lo sé. No tengo ideas fuertes. Estoy abierto a cualquier cosa. Bastante justo.

Una más de mi parte, porque siempre suele ser útil, ¿dónde pueden aprender más sobre Astro, aprender sobre todos los matices, los pros, los contras, ese tipo de cosas? Astro.build es nuestro sitio web. También es nuestro nombre de usuario en Twitter escrito. Con el punto escrito. Ha pasado un tiempo desde que lo escribí. Hemos estado hablando mucho sobre muchos de estos conceptos esta semana. Así que puedes ir y echar un vistazo. Hay enlaces a más demos y todas estas cosas. Sí, somos activos en Twitter. Astro.build es nuestro sitio web. Sí, eso es lo principal, memes y buen contenido. Genial. Bueno, Astro.build, échale un vistazo. Aplausos para Fred. Gracias por unirte a nosotros. Gracias por responder todas nuestras preguntas y contarnos más sobre Astro. Gracias a todos.