ResumabilityResumability

하이드레이션 (React, Vue 방식):
  서버: HTML 렌더링
  클라이언트:
    1. 전체 JS 번들 다운로드
    2. 컴포넌트 트리 재실행 (비용!)
    3. 이벤트 리스너 연결
  문제: JS 크기와 관계없이 항상 재실행

Resumability (Qwik 방식):
  서버:
    1. HTML 렌더링
    2. 애플리케이션 상태 직렬화
    3. 이벤트 핸들러 위치 정보 기록
  클라이언트:
    1. HTML 표시 (즉시)
    2. 이벤트 발생 시 → 해당 핸들러만 다운로드 + 실행
  효과: 클릭 전까지 JS 실행 0

// Qwik 컴포넌트
import { component$, useSignal, $ } from '@builder.io/qwik';

export default component$(() => {
  // Signal: 직렬화 가능한 반응형 상태
  const count = useSignal(0);

  // $(): 이벤트 핸들러를 별도 청크로 분리
  const increment = $(() => {
    count.value++;
  });

  return (
    <div>
      <p>Count: {count.value}</p>
      {/* 클릭 시 increment 함수 청크만 로드 */}
      <button onClick$={increment}>+1</button>
    </div>
  );
});

// 서버 액션 (Qwik City)
import { routeAction$, Form } from '@builder.io/qwik-city';

export const useAddItem = routeAction$(async (data, { env }) => {
  await db.insert(data);
  return { success: true };
});

export default component$(() => {
  const action = useAddItem();
  return (
    <Form action={action}>
      <input name="title" />
      <button type="submit">추가</button>
    </Form>
  );
});