Qwik
https://qwik.builder.io/favicons/favicon.svg
エッジサーバーでの利用を想定した設計になっており、ビルド結果はランタイム JavaScript が削減されたものになる MPA と SPA の両方をサポートする為必要に応じて使い方を変えて良い Hydrationを採用しておらずResumableな設計になっており、レンダリングコストが低い
Qwikのコンセプト
Zero Loading
クライアントサイドで実行されるJavaScriptが極限まで減ることを意識した設計
後述する「Resumable」という特性により画面描画がいち早く行われるようになる
Resumable
後述
Lazy Loading
イベントハンドラなどの動的なコードは実際に必要になるその瞬間までロードされない
初期ロードが早くなることに全振りしており、コア機能に遅延読み込みの機能が組み込まれている
Reduced Rendering
ユーザーの操作に応じて再レンダリングが行われる際に、影響範囲が最小限になる設計を取っている
Scalability
サイト規模によらずコンセプトの機能はどこまでも適用される
Code Once
サーバーサイドとクライアントサイドのメンタルモデルが統一されているため学習コストが低い
サーバーサイドが常にライフサイクルイベントの起点となり、イベントハンドラが構築される
クライアントサイドでは常に必要になった瞬間にイベントハンドラが非同期にロードされて実行される
Resumable (再開可能)ってどういうこと？
Qwikを使用して構築されたWebサイトは、可能な限りサーバー側でレンダリングが行われる
サーバーでレンダリングしたコンテンツをブラウザで受け取ると、クライアントサイドJavaScriptによるハンドラ再開して、レンダリングを完了させる
React や Vue のようなハイドレーションを伴わない仕組みであるため非常に高速にロードと描画が完了する onClick などのイベントハンドラに付いては必要に応じて非同期で読み込むように設計されており、初期ロードされる JavaScript は非常に小さくて済む Qwik City
Reactと強調動作させる
公式で qwik-react と呼ばれるラッパーが提供されており、既存のReactコンポーネントをQwik上で共存させられる
関連