Qwik

Next.js や Nuxt などのフレームワークでは、SSR を行い、それをクライアントで動かすためにハイドレーションを行う。^[3][4] ハイドレーションには一定のコストが存在し、それはコードが多くになるにつれて大きくなるという課題が存在する。^[5]

それに対して Qwik は、Resumable という手段を提供する。Resumable は、ハイドレーションを行わない。Resumable では、ページのロード時に小さな JavaScript コードのみをダウンロードすることで、コードの量によらず JavaScript のロード時間は変わらない。Qwik では、ビルド時にコンポーネントや関数をチャンク分割そ、^[6]ユーザーのインタラクションがあるなど必要なときのみ最小限のチャンクをダウンロードし、実行する。^[7]

例えば、以下のコードにおいて、component$ という単位でコンポーネントが非同期にチャンク分割される。^[1]

const Component = component$(() => {
  return <div>Hello World!</div>
})

Qwik City とは、Qwik におけるメタフレームワークである。^[6] 通常の Qwik プロジェクトにおいては、Qwik City を使用する。^[8]

Qwik City は、ファイルベースルーティングを提供する。^[9] また、Service Worker を用いてチャンクをキャッシュすることにより、チャンクを高速に読み込むことができる。^[7]