Qwik 2.0 Resumability — Hydration 없는 SPA의 진짜 가치

핵심 요약

Qwik 2.0은 hydration을 건너뛰는 resumability로 TTI를 5배 단축한다. 직렬화된 컴포넌트 상태와 이벤트 리스너를 클라이언트에서 즉시 이어받아 초기 JS 0KB가 가능. React/Next는 트리 전체를 hydrate해야 한다. 단, 생태계 작고 학습 곡선, 직렬화 가능 제약 때문에 모든 앱에 맞지는 않는다.

1. Resumability vs Hydration

• Hydration (React/Vue/Svelte): 서버 HTML 받고 → JS 다운로드 → 트리 전체 다시 실행 → 이벤트 부착 → 그제야 인터랙티브
• Resumability (Qwik): 서버에서 직렬화한 상태를 HTML 속성으로 내려보냄 → 클라이언트는 사용자가 클릭한 컴포넌트만 lazy fetch → JS 초기 0KB

핵심은 "재실행"이 아니라 "이어받기". 서버에서 끝난 일을 클라이언트가 다시 안 한다.

2. 실측 — Qwik 2 vs Next 16 (RSC) vs Astro 5

같은 e-commerce 데모(상품 목록 60개, 카트, 검색, 다국어), Vercel Edge 배포.

3. 어떻게 0KB가 가능한가

Qwik는 모든 컴포넌트, 이벤트 핸들러, 상태를 직렬화한다. HTML이 이렇게 생긴다:

<button on:click="/build/q-abc123.js#handler_xyz[0,1]">
  Add to cart (3)
</button>

클라이언트가 클릭하면 그제야 q-abc123.js를 로드해 handler_xyz만 실행. 페이지 로드 시점에는 Qwikloader라는 1KB 짜리 글로벌 리스너만 있다.

4. 컴포넌트 작성

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

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

  // $: 함수를 별도 청크로 분리하라는 표시
  const inc = $(() => { count.value++; });

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

$ 접미사가 핵심. 컴파일러가 코드를 분리하고 lazy load 경계를 만든다. 빠뜨리면 빌드 에러.

5. 라우팅과 데이터 로딩 (Qwik City)

// src/routes/products/[id]/index.tsx
import { routeLoader$ } from "@builder.io/qwik-city";

export const useProduct = routeLoader$(async (req) => {
  const id = req.params.id;
  return await db.product.findUnique({ where: { id } });
});

export default component$(() => {
  const product = useProduct();   // 직렬화돼 클라에도 전달
  return <h1>{product.value.name}</h1>;
});

6. 한계 — 직렬화 제약

7. 생태계 현실 — 2026년 5월

• UI 컴포넌트: Qwik UI, Modus 등 신생, Radix 비교 부족
• 인증: auth.js Qwik 어댑터 안정
• DB ORM: Drizzle, Prisma 그대로 사용
• 호스팅: Vercel, Cloudflare, Netlify, Deno Deploy 모두 공식 어댑터
• 채용: React 대비 매우 좁음

8. 결정 가이드

참고

• qwik.dev
• github.com/QwikDev/qwik