QwikはDOM中心のJavaScriptフレームワークだ。その目的は最速のTTI（インタラクティブになるまでの時間）を提供することで、HTMLのサーバ側レンダリングをリジュームできることと、コードの最適化された遅延読み込みにフォーカスすることにより実現している。
シングルページアプリケーションのサイズと複雑さが増すにつれて、Webサイトの初期読み込み時間は着実に増加している。これは、読み込み時間が長くなると顧客を失う可能性がある消費者向けサイトで特に問題になる可能性がある。
JavaScriptフレームワークの大部分は、初期ブートストラッププロセスに依存している。このプロセスでは、ブラウザがページをレンダリングする前に大量のコードをダウンロードして実行する必要がある。
多くのJavaScriptフレームワークは、サーバ側のレンダリングをサポートしており、サーバ上のサイトのスナップショットをレンダリングすることで初期ロードを軽減する。ただし、ページを再ハイドレーションしたり、インタラクティブにするには、次の2つのコストのかかる手順を実行する必要がある。
- フレームワークとアプリケーション（JavaScript）の両方をダウンロードする必要があるが、このプロセスは非常に長くなる可能性がある。
- JavaScriptイベントをアクティブにするには、ページ自体をJavaScriptフレームワーク内で初期化する必要がある。
一方で、Qwikでは非同期の順不同のコンポーネントハイドレーションを使って、最初のインタラクションがはるかに早く行われるようになる。これは、Qwikが必要なコンポーネントのみを遅延ロードしてレンダリングするためだ。
たとえば、次の構造を見てください。
<myApp>
<myHeader></myHeader>
<myBody><myButton on:click={QRL_Path}></myButton></myBody>
</myApp>
Qwikではサーバ上でアプリケーションを事前にレンダリングした後、インタラクティブな要素はmyButtonのみであると判断し、それをダウンロード/再レンダリングすることだけを行う。残りのコンポーネントは静的であるため、Qwikはそれらをダウンロードしてレンダリングする余分な労力を避ける。
QRL（Qwik Resource Locator）は、Qwikがリソースを接続するために使用する構文である。この例では、on:clickパス（ファイル名+関数名）が含まれ、Qwikはボタンクリック操作に必要な正確なコードを判別できる。
クライアント側では、プロセスはqwikloaderを通して管理される。これは、必要なコードのロードと適切なイベントへの接続を調整する小さな（<1k）ライブラリである。
以下のHTML出力の例を見ると、on:clickイベント内でQRLがどのように使われているかがわかる。qwikloaderでは、インポート中にすべてのイベントタイプを定義する必要があることに注目することも重要である。これにより、スクリプトはページで使われているイベントにのみフックできる。
<html>
<body>
<button on:click="./demo#click">Click Button</button>
</body>
<script src="/qwikloader.js" events="click"></script>
</html>
QwikはBuilderIOによるオープンソースプロジェクト開発者である。Githubリポジトリから入手でき、MITライセンスの下でリリースされている。