Qwik: Resumability e O(1) Hydration

Qwik é o framework mais radical em termos de performance. Não há hydration. Não há reconciliation. Zero JavaScript inicial.

O Problema da Hydration

React, Vue, Svelte - todos fazem hydration:

1. Servidor gera HTML
2. Cliente baixa JavaScript
3. Cliente re-executa toda a lógica para "hidratar" o HTML

Isso é trabalho duplicado. O Qwik resolve isso com Resumability.

Resumability: Serializar o Estado

O Qwik serializa o estado da aplicação dentro do HTML.

<button on:click="./chunk-a3f2.js#handler[0]">
  Click me
</button>

<script type="qwik/json">
  {"state": {"count": 5}}
</script>

Quando você clica no botão:

1. Qwik baixa chunk-a3f2.js (lazy)
2. Executa o handler
3. Atualiza o DOM

Não há hydration prévia. O app "resume" do estado serializado.

O(1) Hydration

No React, o custo de hydration é O(n) - proporcional ao tamanho do app.

No Qwik, é O(1) - constante, independente do tamanho.

Exemplo: Component

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

export const Counter = component$(() => {
  const count = useSignal(0);
  
  return (
    <button onClick$={() => count.value++}>
      Clicks: {count.value}
    </button>
  );
});

O $ indica que o código será lazy-loaded apenas quando necessário.

Fine-Grained Reactivity

Ao contrário do React (que re-renderiza o componente inteiro), Qwik atualiza apenas o nó do DOM que mudou.

export const App = component$(() => {
  const name = useSignal('Felipe');
  
  return (
    <div>
      <h1>Olá {name.value}</h1> {/* Só este <h1> atualiza */}
      <input value={name.value} onInput$={(e) => name.value = e.target.value} />
    </div>
  );
});

Performance Extrema

Sites Qwik têm TTI < 50ms mesmo com apps gigantes.

• Instagram: ~400KB de JavaScript inicial
• Qwik app equivalente: ~1KB

Trade-offs

✅ Performance insana
✅ Escala para apps massivos

❌ Curva de aprendizado (novo mental model)
❌ Ecossistema menor que React
❌ Build setup mais complexo

---

Conclusão: Qwik é o futuro para apps que precisam de performance extrema. Mas React ainda reina em DX e ecosistema.