68. インクリメンタルハイドレーション — 必要な所から順に起こす

通常のハイドレーションは、ページ全体をまとめて一度に起こします。つまり、画面のいちばん下にある重い部品のJSも、最初にまとめて読み込まれます。制御フローのレッスンで学んだ @defer は「重い部分を後から読み込む」道具でしたが、この考え方をハイドレーションに持ち込んだのがインクリメンタルハイドレーションです。ページの部品ごとに「見えたら起こす」「触られたら起こす」と、目覚めのタイミングを選べます。

使い方は2段階です。まず provideClientHydration(withIncrementalHydration()) を設定し、テンプレートでは @defer (hydrate on viewport) { ... } のように hydrate トリガーを書きます。このブロックは、SSRで作られたHTMLが最初から表示されたまま、画面に入ってくるまではJSの読み込みもハイドレーションも保留されます。トリガーには viewport のほかに idle(手が空いたら)、interaction(操作されたら)、hover や、ずっと起こさない never もあります。

@defer 単体との違いに注意してください。@defer だけだと、条件を満たすまでは中身の代わりにプレースホルダが表示されます。hydrate トリガー付きなら、完成した見た目は最初からそこにあり、動き出すのが後になるだけです。「見た目は最初から、動きは必要になってから」。初期表示の速さとJS量の削減を両立する、SSRの仕上げの一手です。