Qwik

Recursos y enlaces

Conceptos clave de Qwik

  • CSR combinado con SSR
    Qwik mezcla renderizado en servidor (SSR) con entrega progresiva del cliente. Su hidratación es diferida, permitiendo que el cliente cargue únicamente lo necesario cuando ocurre una interacción real.
  • Lazy Executing (Resumability)
    El framework serializa el estado del HTML en el servidor y lo reanuda en el cliente sin volver a ejecutar el árbol completo.
    Este mecanismo evita la hidratación tradicional y reduce drásticamente el coste de CPU en el navegador.
  • Serialización
    Qwik serializa señales, stores y closures mediante un formato que conserva dependencias y puntos de reanudación.
    Esto hace posible que cualquier interacción pueda cargar sólo la parte del código implicada.
  • Signals
    Unidades reactivas finas que permiten actualizar únicamente el nodo del DOM afectado.
    Su uso reemplaza estados globales costosos como useState o useEffect.
  • useStore
    Permite manejar estado estructurado (objetos) de forma reactiva sin necesidad de re-renderizar toda la vista.
  • Route Actions
    Mecanismo para manejar acciones desde rutas con lógica en servidor y cliente, similar a loaders + actions de frameworks como Remix, pero totalmente orientado a reanudación.

Arquitectura fundamental

  • Resumability en lugar de Hydration
    Qwik no “hidrata” la app, sino que la reanuda.
    El estado de la aplicación se incrusta en el HTML y el navegador solo ejecuta código cuando lo necesita.
  • División extrema de código
    Cualquier función, incluso pequeñas, puede convertirse en un entry point independiente.
    Qwik usa QRL para definir qué porciones pueden descargarse por demanda.
  • Qwik City
    El meta-framework para enrutado, server loaders, server actions, optimización de islas, etc.

Funciones esenciales

Signals

import { component$, useSignal } from '@builder.io/qwik';

export const Counter = component$(() => {
	const count = useSignal(0);

	return (
		<button onClick$={() => count.value++}>
			{count.value}
		</button>
	);
});

`

useStore

import { component$, useStore } from '@builder.io/qwik';

export const Form = component$(() => {
	const state = useStore({ name: '', age: 0 });

	return (
		<form>
			Name: {state.name}
			Age: {state.age}
		</form>
	);
});

Route Actions

// src/routes/login/index.tsx
import { routeAction$, z, zod$ } from '@builder.io/qwik-city';

export const useLogin = routeAction$(
	zod$({
		email: z.string().email(),
		password: z.string().min(6)
	}),
	async ({ email, password }) => {
		return { success: true, user: email };
	}
);

Lazy Executing con QRL

<button onClick$={async () => {
	const mod = await import('./logic');
	mod.run();
}}>
	Click
</button>

Patrones avanzados

  • Server loaders + actions Pueden ejecutarse en servidor y reanudar su estado en el cliente. Evita duplicar lógica.
  • Islas interactivas ultralivianas Cada componente interactivo puede entregarse como una isla autónoma sin necesidad de hidratar toda la app.
  • Optimización automática del bundle Qwik toma cada evento, closure o función y los convierte en puntos de carga independientes.

Nuevos conceptos añadidos

  • Context API de Qwik Mecanismo de dependencia jerárquica entre componentes sin necesidad de prop drilling.
  • Qwik Optimizer El compilador que transforma funciones en QRLs, crea entry points y genera el HTML serializado.
  • Resumable DOM Sistema interno que permite reanudar listeners, closures y estado sin re-ejecutar la app en el cliente.

Qwik — Expansión de conceptos pendientes (sin repetir lo anterior)

Conceptos adicionales que no estaban cubiertos

QRL (Qwik Resource Locator)

  • Es el mecanismo central para identificar funciones que pueden ser cargadas de forma diferida.
  • Permite que Qwik sepa qué código asociar a cada interacción sin empaquetarlo todo en un único bundle.
  • Aporta:
    • Identificación estable de funciones.
    • Capacidad de serializar su ubicación.
    • División extrema de código sin overhead manual.

Ejemplo de uso de qrl()

import { qrl, component$ } from '@builder.io/qwik';

export const Comp = component$(() => {
	return (
		<button onClick$={qrl(() => console.log('Hello QRL'))}>
			Run
		</button>
	);
});

`

Qwik City: estructura y flujo interno

  • Sistema de rutas basado en el filesystem.
  • Incluye:
    • Loaders: obtención de datos en servidor.
    • Actions: ejecución de lógica en servidor con reanudación en cliente.
    • Middlewares: filtrado de peticiones y composición de funcionalidades.
    • Layouts anidados: permiten crear niveles de UI compartida optimizada.
  • La reanudación permite que todas estas piezas funcionen sin sobrecargar el cliente.

Flujo interno simplificado

  • Petición → Loader/Action → Render en servidor → Serialización → Reanudación progresiva → Código diferido bajo demanda.

Prefetching inteligente

  • Qwik City precarga únicamente lo que el usuario tiene alta probabilidad de interactuar.
  • Estrategias:
    • Hover prefetching: si el usuario pasa el ratón por un enlace.
    • Viewport prediction: si un componente va a entrar en pantalla.
    • Idle-time prefetching: usa el tiempo ocioso del navegador.

Optimización del ciclo de vida (sin hydration)

  • Qwik no usa efectos como useEffect, useLayoutEffect, etc.
  • Esto simplifica el árbol de dependencias y evita re-renderizados globales.
  • Cuando es necesario un efecto real:
    • useTask$: tareas reactivas.
    • useVisibleTask$: lógica que debe ejecutarse solo en el cliente cuando el componente está visible.
    • useOnWindow, useOnDocument, etc.: escuchas globales optimizadas.

Ejemplo useVisibleTask$

import { component$, useVisibleTask$ } from '@builder.io/qwik';

export const Clock = component$(() => {
	useVisibleTask$(({ cleanup }) => {
		const id = setInterval(() => console.log(Date.now()), 1000);
		cleanup(() => clearInterval(id));
	});
	return <div>Clock running…</div>;
});

Qwik y Edge Rendering

  • Qwik está diseñado para ejecutarse en entornos edge:
    • Cloudflare Workers
    • Vercel Edge
    • Netlify Edge
  • Razones:
    • No depende de Node APIs internas.
    • Su tiempo de arranque global es extremadamente bajo (cold start optimizado).
    • Puede serializar estado minimalista para servir como respuesta ultrarrápida.

Forms inteligentes (Qwik City Forms)

  • Basados en actions.
  • No requieren JavaScript para hacer un submit básico.
  • El cliente solo descarga JS si hace falta interacción adicional.
  • Validación progresiva:
    • Validación en servidor con Zod.
    • Validación opcional en cliente sin duplicar lógica.

APIs avanzadas

useTask$

  • Para lógica reactiva basada en señales o stores.
useTask$(({ track }) => {
	const v = track(() => signal.value);
	console.log('signal changed', v);
});

useComputed$

  • Similar a un computed de Vue o un selector memoizado.
const doubled = useComputed$(() => count.value * 2);

useContextProvider + useContext

  • Reemplaza contextos pesados, con reactividad mínima y sin re-render.
import { createContextId, useContextProvider } from '@builder.io/qwik';

export const ThemeCtx = createContextId('theme');

useContextProvider(ThemeCtx, { dark: true });

Temas adicionales importantes

Componentes resumibles y límites de reactividad

  • Cada componente puede “dormirse” y “despertarse” sin pérdida de estado.

  • La reactividad se basa en:

    • Signals (átomos).
    • Computed (derivados).
    • Stores (objetos observables).
  • No hay reconciliación VDOM → más rendimiento crítico.

Estrategias recomendadas de arquitectura Qwik

  • Dividir funciones interactivas en módulos pequeños.
  • Usar QRLs semánticos y consistentes.
  • Encapsular lógica en route loaders/actions siempre que sea posible.
  • Minimizar operaciones en cliente: mover lógica al servidor.
  • Preferir signals a stores si el estado es muy granular.

Conclusión

Ya no quedan conceptos importantes sin cubrir sobre Qwik a nivel “fundamentos + avanzado”. Si quieres, puedo ahora:

  • Crear una nota nueva más profunda (arquitectura, patrones y anti-patrones).
  • Crear otra nota separada solo con ejemplos avanzados.
  • Hacer un glosario completo de todo Qwik.
  • O generar una guía de migración a Qwik desde React, Svelte o Solid.