Server Side Rendering (SSR)

ETAPA 1 - Servidor

Una vez que ya entendemos las partes que construyen el componente, al iniciarse, lo que sería la primera carga, aplicando mediante SSR se va a descargar lo indispensable para poder iniciar la aplicación, nada más y el resultado inicial sería que se registra el mensaje en la consola del servidor (veremos con más detalle este proceso en los ciclos de vida en Qwik):

Aparte de mostrar el registro en el servidor, tendremos el HTML de la estructura y descargaremos información de la API, por si necesitamos su uso.

Abrimos las herramienta de desarrollador de nuestro navegador y seleccionamos la pestaña Red para ver lo que tenemos descargado en esta primera etapa.

En este punto, nos quedamos a la espera de que hagamos cualquier acción o interacción como pulsar el botón (NO LO HAGÁIS POR EL MOMENTO), que es lo que podríamos hacer en este caso, no habría más opciones.

Si realizamos la acción de click, tenemos la opción de descargar más código como el definido dentro del evento onClick$ que consiste en un nuevo registro en la consola:

 <button
  onClick$={() =>
    console.log(
      'CLIENTE: Se ejecutará cuando hagamos CLICK. Mientras tanto no se carga esta parte del código'
    )
  }
>
  Click para iniciar código
</button>

Dentro de las herramientas de desarrollo si miramos en los Elementos, podemos ver la referencia del código Javascript que se descargará cuando realicemos la acción de click (NO LO EJECUTÉIS todavía):

El path con el código Javascript que se descargará en el caso de hacer click, lo encontramos dentro del atributo on:click:

/src/routes_component_div_button_onclick_xoh0eog14zi.js#routes_...

Habiendo llegado a este punto y teniendo más claros los conceptos básicos, se puede dar por concluida la primera etapa donde se ha ejecutado el renderizado por el lado del Servidor (SSR).

A partir de ahora, cualquier evento que ocurra en nuestra aplicación (si hay un registro en la consola, alguna renderización, etc.), se ejecutará todo en el lado cliente, lo que sería en el navegador junto con las descargas y acciones a realizar.

ETAPA 2 - Navegador

La segunda etapa comienza cuando hacemos click en el botón (¡ahora si!), disparando el evento onClick$() que hará que muestre el mensaje en la consola del NAVEGADOR

El código se va a descargar bajo demanda (por la acción del click) en el navegador y lo que hará es mostrar el mensaje en la consola del navegador, con el siguiente mensaje:

CLIENTE: Se ejecutará cuando hagamos CLICK. Mientras tanto no se carga esta parte del código

Y se visualiza de la siguiente forma:

Al hacer click, descarga el contenido en un fichero aparte, que corresponde a la referencia anterior cuyo path era: /src/routes_component_div_button_onclick_xoh0eog14zi.js#routes... y que podemos ver en la pestaña Red dentro de las Herramientas de Desarrollo:

Y si seleccionamos la referencia, para ver su código descargado podremos ver que ahí se encuentra el registro que se muestra en la consola del navegador mediante la pestaña Respuesta:

Como recordartorio, se visualiza de la siguiente forma en la consola:

Y con esto, tenemos lo básico y ensencial para entender este concepto, el de SSR (Server Side Rendering).

Ahora seguramente nos vengan a la cabeza las siguientes preguntas:

• ¿Qué pasará si hacemos click de nuevo al botón?
• ¿Descargará de nuevo el código asociado?
• ¿Qué pasará en la consola, se mostrará otro mensaje con el mismo contenido?

Quizás nos estemos cuestionando muchas cosas (y no es malo, es bueno tener dudas y preguntas a realizar) y por eso, mejor ir a la acción y obtener la respuesta:

• No descarga de nuevo el código, reutiliza lo que ya tenemos disponible para realizar la acción.
• Muestra un nuevo mensaje y si no hemos registrado nada después del primer click, al haber dos mensajes iguales, se agrupan y aparece un 2 como a continuación:

Y observando la pestaña Red podemos ver que no ha descargado nada nuevo, por lo que ya estamos viendo cual es su comportamiento, algo a tener en cuenta para futuras funcionalidades: