Este es uno de los conceptos fundamentales de Qwik. Mientras que muchos frameworks tienen herramientas para acceder a un modo SSR, Qwik ya lo trae por defecto. Según lo entiendo, el HTML ya viene dado desde el servidor. Esto lo podemos ver a través de la pestaña de Response. Por eso lo de tener tanta velocidad y performance.
Observemos el siguiente ejemplo de un clásico button
// Path: src/routes/index.tsx
import { component$ } from "@builder.io/qwik";
export default component$(() => {
console.log("SERVIDOR: Cuando me monto, aparezco 🐴");
return (
<div>
<button onClick$={() => console.log("CLIENTE: me cargo on demand 👨🍳")}>
Hazme click
</button>
</div>
);
});
Podemos ver muchas cosas novedosas a través de este ejemplo, como por ejemplo el tema de ese onClick$. Eso es un tema para la lección siguiente, la del Lazy Loading, así que te toca esperar un poco más. Ves que hay dos console.log, uno antes del return y otro en el evento del button. Observa dónde recibiremos cada uno de los logs.
El componente viene disponible ya desde el servidor (por ello ese primer console.log sucede ahí y lo recibimos en la terminal). Esta es una de las magias de Qwik, y el encargado de hacer esto es el $ que verás por todos lados en una aplicación de Qwik, como por ejemplo en component$.
Si te has fijado, en el último vídeo vemos cómo al hacer un click en el botón se añade un nuevo script a la página. Hablemos más de ello en la siguiente lección.