¡Ojo! Ha salido una nueva versión de Astro, ¿vale? El framework que yo creo que está más de moda últimamente o está en más buena forma.
Más buena forma en el sentido de que creo que puedes no haberlo utilizado, pero como que todo el mundo que lo utiliza está contento, ¿no? Eso es lo que podríamos decir.
Ha salido la versión 4.12 y trae una novedad experimental que te juro, te juro por lo más sagrado, que esto te va a encantar.
A ver, el tema, el tema, amigos. ¿Qué es lo que trae? Trae una cosita que se llama server islands. ¿Qué son las server islands? O las islas del servidor.
Bueno, Astro ya tiene como una arquitectura de islas. Esta arquitectura de islas, hasta ahora, lo que hacía es que toda tu página era estática y lo que hacías es que una parte de tu página la hacías dinámica en el cliente.
Para cargar React, para cargar Vue, para cargar Svel, para cargar lo que quisieras, para hacer esa parte dinámica. Y era muy interesante, pero esto es darle la vuelta.
Esto son islas, pero en el servidor. Para hacer que la parte que tú quieras sea dinámica en el servidor.
¿Y por qué puede ser esto interesante? Pues, hombre, no te preocupes porque te tengo un ejemplo.
Y es que, fijaos, he hecho una landing page para mi libro de Git. Y fijaos, comprar libro físico en Amazon España, no sé qué. Vale.
Pero este botón que veis aquí, que está muy bien, comprar libro físico en España, no es el mismo para todo el mundo.
¿Por qué? Porque fíjate que se carga después. Toda la página que veis, toda la página, todo lo que veis es estático.
No está renderizado en el servidor, no. Es estático.
De hecho, si veis el código fuente, veréis que aquí aparece todo el HTML.
Tenéis todo el HTML, excepto esta parte de aquí, de este botón.
Esta parte de aquí, de este botón, fijaos que aparece como un JavaScript en esa parte.
En esa parte aparece un JavaScript. ¿Y qué es lo que está haciendo Astro?
Lo que hace Astro es hacer una llamada a una API, esto le devuelve el HTML que tiene que pintar y lo pinta.
¿Y qué es lo que pinta aquí diferente?
Ahí está. Mira, Darka Cots lo está diciendo el chat. A mí me dice comprar en México.
Pero esto, ¿cómo sabe dónde vivo? Tengo miedo.
Porque sé dónde vives, Darka Cots. Y ahora mismo te estoy viendo.
Nah, es mentira. No es por eso. Son dos cosas muy, pero que muy, muy interesantes de por qué sé dónde vivís.
Lo primero es que, dependiendo de dónde viváis, ¿vale?
Si entráis desde España, veréis un botón. Desde México, veréis otro botón.
Y si sois de Colombia, Argentina o que sea, veréis otro botón.
Y mirad, aquí os hago el ejemplo porque no puedo activar ahora la VPN por miedo a que me desconecte el directo, ¿vale?
Pero fijaos, aquí, aquí lo podéis ver. Pues fíjate aquí. Fíjate en esto.
Aquí, yo cuando reinicio, como yo soy de España, me sale España, ¿vale?
Y ahora con la VPN le cambio, se lo cambio y le pongo México, ¿vale?
Reinicio, que además es inmediato, o sea, reinicio.
Y como esa parte se renderiza desde el servidor, ¿ves? Ahora pone México.
Y si pongo Colombia, pues también cambia el botón y me pone otro.
Ahora os enseñaré la magia que hay detrás de esto, ¿vale? ¿Veis?
Todo lo demás es estático. Es tremendo porque va súper rápido, pero solo esa parte que queremos que sea dinámica es lo que cambia.
¿Cómo funciona esto? Bueno, es que es demasiado sencillo.
Es que te lo voy a enseñar y vas a decir, pues tampoco es para tanto.
Mirad, amigos, ¿cómo funciona esto?
Esto, lo que tenemos que hacer es indicar, estoy abriendo el proyecto, ¿eh?
Es indicar qué componente tiene que cargarse desde el servidor.
Así que aquí, en el componente, en este, aquí, tu, tu, tu, tu.
Entonces, fijaos, aquí tengo este componente que pone buy button y pone server, dos puntos, defer.
Esto es lo que estamos diciendo es, este componente queremos que se cargue de forma diferida desde el servidor.
Ya está. Solo con eso ya lo tendríamos.
Y luego, dentro del buy button, ¿qué es lo que estoy haciendo?
Y esto es una cosa que os va a encantar porque si desplegáis vuestro proyecto en Astro, fijaos que lo que podéis hacer es, desde las cabeceras, podéis leer la cabecera xvercellipcountry.
Y esto os va a dar el código del usuario.
Os puede decir, español, o sea, ES de español, MX de México, US de Estados Unidos.
Os va a chivar, os va a revelar cuál es el país de vuestro usuario.
Esto muy poca gente lo sabe.
No, en inglés no.
Lo que te da es el país, no el idioma.
Te da el país, ¿vale?
Entonces, fijaos, sí, he puesto Colombia porque quería probar una cosa.
Para que, básicamente, nos dice el rest.
Pero esto es lo más interesante.
Lo que te está diciendo esto es, ¿de qué país es el usuario?
Y entonces, aquí lo que estoy haciendo es que, si es de España, renderizo esto, México esto, y el resto del mundo este.
Porque solo lo tengo en Amazon México y en Amazon España.
Así que, esto es súper, súper, súper interesante porque solo este componente es el que se está ejecutando en el servidor.
Un montón de gente en Twitter, tengo una paciencia a veces, porque me dan ganas de comprarme un lanzallamas e ir por ahí e incendiar Twitter.
Porque mucha gente se ha puesto a decir que, ay, esto es muy antiguo, esto ya lo tenía PHP.
PHP, es que, siempre, siempre todo el mundo tiene que decir que, mira que me gusta PHP, pero ¿por qué tenéis que meter a PHP en estas cosas?
No hace exactamente lo mismo PHP.
Esto, para que os quede claro, todo lo que veis, todo lo que veis de la página, todo, es estático.
O sea, esto no está en el servidor, esto no está renderizado en el servidor, todo es estático.
Lo único es que está inyectando JavaScript para ejecutar esta parte en el servidor y traer el HTML.
Pero todo lo que veis es estático, es que es impresionantemente rápido, más rápido incluso que PHP.
Que PHP está muy bien, que sí, que lo podrás cachear desde el servidor, pero no hay nada más rápido que algo estático.
No hay nada más rápido, ¿vale?
Aunque en PHP tú digas, voy a devolver HTML y tal, no es más rápido, ¿vale?
Y entiendo la idea de que sí, se parece, ¿por qué?
Pero solo el hecho de que la experiencia de desarrollo sea tan sencilla no es lo mismo.
Y aunque se pudiese haber hecho con PHP, que no es lo mismo, da igual.
Porque es que ahora lo estamos haciendo con un framework totalmente diferente.
Entonces, dejad de comparar y dejad de decir que esto se podía hacer en mis tiempos, mozos.
¿Qué más da?
En fin, pues eso, que es muy, muy interesante.
Os lo recomiendo un montón.
Está experimental todavía, ¿vale?
Todavía está experimental, pero en temas rendimiento es increíble lo bien que va.
O sea, es que, bueno, lo podéis ver en...
Ya os digo que podéis entrar en la página esta por si lo queréis probar.
Pero fijaos, la página es instantánea.
La página es instantánea.
Lo mejor de todo, para que lo sepáis, porque a lo mejor, claro, alguien dirá,
¡Ay, pero es que hace el parpadeo, ¿no?
Y es verdad que hace un parpadeo, ¿vale?
Es verdad que hace como un parpadeo.
Pero lo interesante que tenemos aquí es que le podéis poner un playholder.
Que, claro, esto no os lo he enseñado.
Os lo enseñaré más adelante cuando hagamos el curso de Astro.
Pero aquí podéis poner lo que queráis, ¿sabes?
Podéis poner ahí un playholder para que...
Ahora, esto va demasiado rápido.
Pero si le ponemos aquí 3G, a ver, 3G, a ver si...
Bueno, ahí le podéis poner un playholder.
No me funciona ahora, no sé por qué.
Pero se supone, se supone que se puede poner un playholder.
Ah, mira, slot fallback.
Vale, pues ahí lo tenéis.
Slot fallback.
Hay que ponerle slot fallback.
Aquí ponemos slot fallback.
Y ya está.
Entonces, mientras se carga, que es muy rápido, pero bueno, da igual.
Mientras se carga, ¿ves?
Podéis poner ahí lo que queráis.
Y podéis poner un botón que se parezca mucho para que no se note el parpadeo.
Esto es yo, que no me ha dado tiempo.
Pero que es tremendo el hecho de que tú puedes renderizar ahí algo y cuando esté, pues que aparezca y ya está.
O sea, y es increíblemente rápido.
Yo ahora, porque le he puesto Fast 3G, o sea, cuando se lo ponéis que no haga cargas así, pues es tremendo.
Pero, ¿en qué se diferencia esto de lo que había de Astro?
Porque Astro antes, las islas que teníamos antes era del cliente.
Estas islas son del servidor.
Es como darle la vuelta totalmente.
Las del cliente son más bien para hacer algo dinámico en el cliente.
Y estas del servidor serían, por ejemplo, puede ser muy útil para un e-commerce, para una tienda online.
Donde toda la página, toda la tienda es totalmente estática, excepto el stock.
Entonces, toda la página está creada estáticamente y el número del stock o el precio.
El precio, como puede ir cambiando, pues también lo puedes hacer dinámico.
Solo esas partes que puedan ser dinámicas, pues las haces ahí dinámicas para que cambien desde el servidor.
Le puedes poner el playholder que tú quieras, pero que se actualice en cuanto está en el cliente.
O sea, es tremendo. Es impresionante.
¿El despliegue puede ser como sitio estático?
No. Tiene que ser como mínimo, como híbrido.
Porque, claro, obviamente necesitas de alguna forma poner esto.
O sea, tiene que cargarse desde un endpoint.
O sea, tiene que ser como mínimo híbrido.
¿Es como el use server? No.
Porque esto es...
Use server, para empezar, es solo de React.
Y el use server es parecido, pero claro, el use server es todo sería React.
No es que sea estático todo lo demás.
Lo más parecido que tiene, para que lo entendáis, Next.js, sería el partial pre-rendering.
Es esto, que también lo tienen experimental.
Esto, el partial pre-rendering, que también está experimental.
Pero es mucho más complejo.
Muy difícil el partial pre-rendering.
O al menos yo, no sé, me parece como que un poco raro porque tienes que ponerlo en un sitio, exportar.
No sé, más complejo como de pensarlo, ¿sabes?
Lo otro me parece mucho más fácil porque es como al revés.
O sea, el partial pre-rendering es lo que le dices lo que tiene que pre-renderizarse.
En cambio, esto lo que le dices es lo que tiene que ser dinámico.
Entonces, me gusta como más...
Me gusta más el de Astro.
A mí, personalmente, ¿eh?
Las cosas como son.
Muy bien, pues eso es la novedad.
Ya haremos un curso más adelante de Astro con todas estas cositas.
No os preocupéis porque es que me parece que está tan y tan interesante que es que no...
Es que Astro no para, tío.
De hecho, mañana voy a estar desarrollando un proyecto freelance, ¿vale?
Que me voy a estar pagando y tal.
Es de una empresa bastante importante, pero no os puedo explicar, no os puedo decir cuál.
Ya os contaré.
Pero desarrollo proyecto real como freelance mañana.
Y mañana voy a utilizar Astro.
Así que voy a estar utilizando Astro.
Astro, vamos a hacer animaciones, vamos a hacerlo todo desde cero.
Son tres días de desarrollo que yo he calculado más o menos.
Es una landing page.
Así que si queréis ver cómo hago un proyecto de freelance desde cero, lo vais a poder ver.
No es de CrowdStrike, por ahora.
Pero creo que puede estar muy bien porque muchas veces me preguntáis,
oye, ¿y cómo podría?
No sé qué, no sé cuánto.
Pues mañana lo vas a ver.
No sé qué, no sé qué.