レキシカルスコープのキャプチャ
この例では、Qwik がコンポーネントの状態をどのようにシリアライズするかを探ります。単純なアプローチとしては、Qwik が useStore() に関連付けられたすべての状態を保存することです。しかし Qwik はより賢く、クライアントで必要とされないストアをツリーシェイキングしようとします。
この例は以下で構成されています。
<App/>: ストアを作成します。- ストアには
largeDataプロパティが含まれています。これはサーバーでのみ必要な大規模なデータセットと仮定します。この例としては、HackerNews デモがあります。サーバーは JSON API からニュース記事を取得し、そのデータを使用してレンダリングする必要があります。記事はユーザーにとって読み取り専用であるため、HTML レスポンスはクライアントで再レンダリングされることはありません。そのため、データをクライアントに送信しないことが望ましいです。 - 無関係のデータを更新するボタン。
HTML タブを見て、largeData が <script type="qwik/json"> にシリアライズされていることに注目してください。これは、変更されることも再レンダリングに使用されることもないデータをクライアントに送信しているため、理想的ではありません。この演習での目標は、これを修正することです。
なぜ largeData はシリアライズされるのか
Qwik のシリアライズプロセスは、すべてのリスナーをシリアライゼーションルートとして使用することから始まります。この場合、<button> の onClick$ がシリアライゼーションルートとして使用されます。 onClick$ クロージャは store をクロージャしています。onClick$ が store をクロージャしているという事実により、Qwik は store とそのすべての子プロパティをシリアライズせざるを得なくなります。
これを修正するには、onClick$ クロージャを store.counter.count++ から counter.count++ に変更します。（counter のローカル参照は既に作成されています。）この変更により、onClick$ クロージャがキャプチャするものが変更されます。より具体的な参照をキャプチャすることで、Qwik は largeData プロパティをシリアライズする必要性をなくすことができます。
HTML タブを開くと、Qwik はこの例では largeData をシリアライズしなくなっていることがわかります。