静的コンポーネントのツリーシェイキング
Qwik の重要な概念の1つは、Qwik はクライアントで再レンダリングが必要なコンポーネントのコードのみをロードすることです。コンポーネントが静的である場合（再レンダリングする必要がない場合）、Qwik はコンポーネントをロードしません。これは動的なツリーシェイキングの一種です。「動的」という単語は、古典的な静的ツリーシェイキングと区別するために使用されています。
静的ツリーシェイキングと動的ツリーシェイキング
静的ツリーシェイキングとは、バンドラが到達不可能なコードを削除する方法です。アプリケーションの場合、すべてのコンポーネントは到達可能です。これは、コンポーネントがSSRでの初回レンダリング時に到達可能であるためです。そうでなければ、コンポーネントはクライアントに表示されません。したがって、静的ツリーシェイカーは、最初のアプリケーションレンダリングツリーからコンポーネントを削除できません。
動的ツリーシェイキングとは、初回レンダリング後、コンポーネントがユーザーが実行できる操作から到達不可能になるという事実を指します。コンポーネントは、最初のSSRレンダリングでは到達可能ですが、後続のユーザーインタラクションからは到達可能ではありません。これが、バンドラの静的ツリーシェイキングと区別するために「動的ツリーシェイキング」という用語を使用する理由です。
静的ツリーシェイキングには、特定のコンポーネントが到達可能かどうかを判断する際に、ランタイムコンテキストを考慮しないという欠点があります。最悪のシナリオを想定し、SSR中にサーバー上で到達可能であるため、コンポーネントを保持する必要があります。
例
+1ボタンをクリックして例を操作します。注意すべき点がいくつかあります。
- サーバーはすべてのコンポーネントを実行する必要があります。したがって、サーバーの観点からは、すべてのコンポーネントが必要になります。
- クライアントで
+1をクリックしても、<App>を再レンダリングする必要がないため、<App>はロードされません。
ここでChildを編集し、{props.store.count}へのバインディングを削除します。すると、子コンポーネントはクライアントでレンダリングされなくなり、関連するレンダリングコードもロードされなくなります。
Qwik は、アプリケーションのランタイムコンテキストに基づいて、どのコンポーネントが必要かを判断します。データバインディングによって、コンポーネントが静的であるか動的であるかが決定され、それによってコンポーネントがツリーシェイキングされるかどうかが決まります。
実際には、多くのコンポーネントがアプリケーション内で静的であり、クライアントからロードする必要がありません。
チュートリアルの編集