useTask$

El hook useTask$ nos permite ejecutar código antes del renderizado inicial, es decir, desde el servidor. Opcionalmente, si le pasamos el parámetro track, nos permitirá ejecutar dicho código también cada vez que el valor que se está observando cambie.

   import { component$, useSignal, useTask$ } from '@builder.io/qwik';
   
   export default component$(() => {
    const count = useSignal(0);

    useTask$(({ track }) => {
      // track(count); Opción 1 - track toda la señal
      track(() => count.value); // Opción 2 - track solo el valor

      console.log('value', count.value);
      // Este log se dispara en el servidor antes de renderizar y en el cliente cada vez que se cambie el valor
    });

     return (
       <div>
          <div>Este es el valor: {count.value}</div>
          <button onClick$={() => count.value++}>Add +1</button>
       </div>
     );
   });
          

Es un método muy útil que yo en lo personal suelo utilizar para hacer debugging. Sin embargo, dado que se activa desde el servidor, con esta función todavía no tendremos acceso al window o al document. Para acceder a elementos del DOM cuando se renderice el componente, debemos utilizar useVisibleTask$.