怠zyな荷重とアプリケーションの水分補給は、主に水分補給にはアプリケーションコードを熱心に実行する必要があるため、怠zyな負荷の利点を損なう必要があるため、複雑でしばしば対立する方法で相互作用します。
##水分補給の仕組みと怠zyな負荷への影響
水和とは、イベントリスナーを添付し、コンポーネント状態を復元し、ページをインタラクティブにするためにJavaScriptを実行することにより、サーバーレンダリングのHTMLページがクライアント側で「アクティブ化」されるプロセスです。このプロセスでは、ルートから始まるアプリケーションコンポーネントを実行し、コンポーネントツリーを通過して状態、バインディング、およびイベントハンドラーを理解します。
水分補給は、現在のレンダリングツリー内のすべてのコンポーネントにアクセスして、インタラクティブである必要があるかどうかを判断する必要があるため、これらすべてのコンポーネントを熱心にロードおよび実行する必要があります。これは、怠zyな負荷のためにいくつかのコンポーネントをマークしても、水分補給が最初のレンダリングツリーの一部である場合、すぐにロードされることを意味します。水分補給は連続しており、中間成分をスキップして子供成分を直接水分補給することができないため、すべての親成分を最初に水分補給する必要があります[1] [6]。
##なぜ水分補給妨害怠zyなロード
- 熱心な実行：水分補給には、レンダリングツリー内のすべてのコンポーネントを実行する必要があります。これにより、これらのコンポーネントのコードの負荷が延期されるのが怠zyな負荷が妨げられます。
- コンポーネントの依存関係：子コンポーネントは親コンポーネントからの小道具に依存するため、親は最初に水分補給し、熱心な荷重を強制する必要があります。
- イベントハンドラーと状態：水分補給は、イベントリスナーを設定し、コンポーネントコードを前もって実行する必要がある状態を復元する必要があります。
- 開発者の負担：水分補給中に怠zyな負荷を達成するには、開発者はプリフェッチとコードの分割を手動で管理する必要があります。これは複雑でエラーが発生しやすい可能性があります[6] [7]。
##水分補給にもかかわらず怠zyな荷重が機能するとき
怠zyなロードは、初期レンダリングツリーの一部ではないため、水分補給中に訪問されないコンポーネントに依然として効果的です。例は次のとおりです。
- ユーザーインタラクションで開くダイアログまたはモーダル
- 最初にレンダリングされないさまざまなルート上のコンポーネント
これらの場合、水分補給が即時の実行を強制しないため、コンポーネントは本当に怠zyな負荷をかけることができます[6]。
##水分補給と怠zyな負荷を最適化するためのテクニック
一部の最新のフレームワークとライブラリは、怠zyな水分補給または選択的な水分補給を実装することにより、この相互作用を最適化しようとします。この場合、コンポーネントは必要に応じて水分補給されます。
- next.jsの「Next-Lazy-Hydration-on-sscroll」のようなライブラリは、コンポーネントが視界にスクロールするまで水分補給を延期させることができます。
- 交互のオーバーサーバーAPIを使用すると、コンポーネントはビューポートに入るときにのみ怠zyなロードおよび水分補給できます。
- Vue/Nuxtでは、怠zyな水分補給技術とプラグイン(例えば、「Nuxt-Lazy-Hydrate」)を使用すると、メインスレッドがアイドル状態になるか、コンポーネントが表示されるまで水分補給を遅らせ、インタラクティブおよび最初の入力遅延メトリックまでの時間を改善します[4] [5]。
＃＃ まとめ
水分補給にはレンダリングツリー内のコンポーネントの熱心な実行が必要であり、コードの実行を延期するのを怠るのを防ぐため、水分補給と怠zyな負荷は根本的に対立しています。ただし、初期の水分補給範囲外のコンポーネントには怠zyな荷重が効果的です。怠zyな水分補給のような新たな技術は、水分補給そのものを延期し、パフォーマンスとユーザーエクスペリエンスを改善することにより、この紛争を調和させることを目的としています。
本質的に、水分補給は、最初のページの負荷中に怠zyな負荷を妨害しますが、慎重なアーキテクチャの選択と特殊なツールを使用すると、開発者は怠zyな荷重の利点を回復するためにコンポーネントをいつ、どのように水分補給するかを最適化できます[1] [6] [7]。
引用：
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-are-compatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-resource-optimization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linkedin.com/posts/misko-hevery-3883b1_lazy-loading-is-like-exercise-everyone-says-apivity-7115086933935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading