【クイック】
Qwik（クイック） とは？
最終更新:
💡 最初から全部を動かさず、必要な処理を再開する
サーバーで描画した状態をブラウザー側で再開するResumabilityを採用したWebフレームワーク。操作に必要なJavaScriptを細かく分け、初期の実行負担を抑える設計を持つ。
📌 このページのポイント
- サーバーで描画した状態やイベントの情報をHTMLへ保存する
- ブラウザーでアプリ全体を再構築するHydrationを避ける設計
- 操作に必要なコードは分割し、事前取得も利用する
- JavaScriptが不要になるわけではなく、性能は実測で確認する
ひよこ Qwikは、何が特徴なの？
ペンギン先生 サーバーで作った画面の状態を、ブラウザーで「再開」するResumabilityが特徴だよ。画面を表示した後にアプリの状態やイベントを一から組み立て直す負担を減らし、必要な処理だけを動かす設計なんだ。
ひよこ Hydrationって何をするの？
ペンギン先生 ひよこ じゃあ、JavaScriptはゼロでいいの？
ペンギン先生 いいえ。操作を受け取るローダーや、ボタンなどの振る舞いを実行するコードは必要だよ。Qwikではコードを細かく分け、必要な部分を読み込んで実行する。画面が見えた瞬間に、どんな機能も待ち時間なしで動くという保証ではないんだ。
ひよこ ボタンを押すまで、コードを取りに行かないの？
ペンギン先生 押す前に必要そうなコードを取得するプリフェッチも使うよ。ダウンロードしておくことと、実行することは別。先に取得しておけば、操作時の通信待ちを減らせる。ただし取得が終わっていない場合や回線が遅い場合には、待ち時間が生じることもあるんだ。
ひよこ 導入すれば、サイトは必ず速くなる？
ペンギン先生 初期のJavaScript実行を抑えるための設計だけれど、結果はページの内容や作り方、端末、通信環境にも左右されるよ。画像や第三者のスクリプトなども含め、実際の表示と操作を測って判断しよう。初期処理の仕組みを変える選択肢として理解するとよいね。
📖 おまけ：英語の意味
「Qwik」 ＝ Webフレームワークの名称
💬 公式資料ではResumability（再開可能性）を中心とした設計を説明しているよ。