Qwik

Qwik
開発元 Builder.io
リポジトリ https://github.com/QwikDev/qwik
プログラミング
言語		 TypeScript, Rust
ライセンス MIT License
公式サイト https://qwik.dev
テンプレートを表示

Qwik は、JavaScript/TypeScript 向けのWebアプリケーションフレームワークである。 SSR 及びブラウザ上での実行におけるパフォーマンスに重点を置いている。

概要

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

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

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

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

Qwik City

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

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

参考文献

  1. 1 2 3 “qwikをざっくり調べてみた”. Zenn. 2024年10月19日閲覧。
  2. ↑ “Qwikとは何か？特徴と使い始める方法を解説 | 株式会社一創”. www.issoh.co.jp (2024年10月15日). 2024年10月19日閲覧。
  3. ↑ “NextjsのHydrationって何？｜DonTacos”. note（ノート） (2023年2月15日). 2024年10月19日閲覧。
  4. ↑ “Nuxt3における hydrationとは？”. Qiita (2023年8月15日). 2024年10月19日閲覧。
  5. ↑ “Qwik調べてみたら結構面白かった”. Zenn (2022年9月28日). 2024年10月19日閲覧。
  6. 1 2 “Qwik City で作るブログアプリ”. Zenn. 2024年10月19日閲覧。
  7. 1 2 “Qwikの基本概念である Resumable を理解する”. Zenn. 2024年10月19日閲覧。
  8. ↑ “Qwik(City)を試してみた感想 | Memory ice cubes”. leaysgur.github.io (2023年1月23日). 2024年10月19日閲覧。
  9. ↑ “NewtとQwik Cityを利用してブログを作成する”. コンテンツ管理の新しいスタンダード | ヘッドレスCMS「Newt」 (2024年1月18日). 2024年10月19日閲覧。