遅延ハイドレーション戦略
hydrateOnIdle()、hydrateOnVisible()、hydrateOnInteraction()――Nuxtの遅延ハイドレーション
「遅延ハイドレーション戦略」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ハイドレーションのコスト問題
SSRはすぐに表示できるHTMLを送信しますが、クライアント側ではインタラクティブにするために、すべてのコンポーネントをハイドレーションする必要があります。最初にすべてをハイドレーションするとメインスレッドをブロックし、操作可能になるまでの時間（TTI）が遅れます。
遅延（lazy）ハイドレーションでは、実際に必要になるまでコンポーネントのハイドレーションを遅らせます。
Nuxtの自動遅延読み込みプレフィックス
Nuxtでは、コンポーネントにLazyというプレフィックスを付けると、遅延インポートされます。ハイドレーション戦略と組み合わせることで、JavaScriptのダウンロードとハイドレーション処理の両方を遅らせられます。
<template>
<!-- Nuxt resolves LazyMyComponent automatically -->
<LazyMyComponent />
</template>hydrateOnVisible
hydrateOnVisibleは、IntersectionObserverを内部で使い、コンポーネントがビューポート内にスクロールされてきたときだけハイドレーションします。ファーストビューより下にあるセクションに最適です。
<template>
<!-- Nuxt syntax: hydrate when visible -->
<LazyProductReviews hydrate-on-visible />
</template>
<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->マージン付きのhydrateOnVisible
IntersectionObserverのオプションを渡すことで、要素が表示される前にハイドレーションを開始し、体験を滑らかにできます。
<template>
<!-- start hydrating 100px before entering viewport -->
<LazyComments
:hydrate-on-visible="{ rootMargin: '100px' }"
/>
</template>hydrateOnIdle
hydrateOnIdleは、ハイドレーションの前にブラウザがアイドル状態になるまで（requestIdleCallbackを介して）待機します。初期の操作性を妨げるべきではない重要度の低いウィジェットに使います。
<template>
<!-- hydrate during idle time -->
<LazyNewsletterSignup hydrate-on-idle />
<!-- optional max timeout in ms -->
<LazyChatBubble :hydrate-on-idle="3000" />
</template>hydrateOnInteraction
hydrateOnInteractionは、要素上で指定したDOMイベント（click、focus、mouseover）が発生するまでハイドレーションを遅らせます。ユーザーが操作するまで、コンポーネントは静的なHTMLのままです。
<template>
<!-- hydrate only on click -->
<LazyDropdownMenu hydrate-on-interaction="click" />
<!-- multiple events -->
<LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>hydrateOnMediaQuery
hydrateOnMediaQueryは、メディアクエリが一致したときだけハイドレーションします。たとえば、モバイルでは非表示になるデスクトップ専用のサイドバーをハイドレーションし、小さな画面での無駄な処理を避けられます。
<template>
<!-- only hydrate on wide screens -->
<LazyDesktopSidebar
hydrate-on-media-query="(min-width: 1024px)"
/>
</template>VueコアAPI：hydrateヘルパー
Nuxt以外では、同じ戦略をdefineAsyncComponentのhydrateオプションに渡すハイドレーションヘルパーとして利用できます。Nuxtのプレフィックスは、これらを簡潔に記述するための糖衣構文です。
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const LazyChart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
hydrate: hydrateOnVisible()
})適切な戦略を選ぶ
目的に合わせて戦略を選びます。
- Visible — ファーストビューより下のコンテンツ（レビュー、フッター）
- Idle — バックグラウンドのウィジェット（アナリティクス、ニュースレター）
- Interaction — ユーザーの操作で表示されるUI（メニュー、モーダル）
- Media query — デバイス固有のUI
注意すべきトレードオフ
遅延ハイドレーションによってTTIは改善しますが、トリガーが発生するまでコンポーネントは操作できません。操作ベースの戦略では、最初のクリックがハイドレーションの開始に使われるため、わずかな遅延を感じることがあります。主要なCTA UIには、即時ハイドレーションを使用してください。
アイランドとの組み合わせ
遅延ハイドレーションはアイランドアーキテクチャと組み合わせて使えます。ページの大部分は静的なサーバー描画HTMLで、インタラクティブなアイランドだけが戦略に応じて遅延ハイドレーションされます。その結果、クライアント側のJavaScriptを最小限に抑えながら、必要な箇所では高速なインタラクティブ性を実現できます。
<template>
<StaticArticle /> <!-- never hydrates -->
<LazyCommentBox hydrate-on-visible />
<LazyLikeButton hydrate-on-interaction="click" />
</template>クイックチェック
ハイドレーション戦略の理解度を確認しましょう。
まとめ
遅延ハイドレーションについて学びました。
- Nuxtの
Lazyプレフィックスはコンポーネントを遅延インポートします - hydrateOnVisible — IntersectionObserverを使って、画面下部にある要素を対象にします
- hydrateOnIdle — 重要度の低い処理をアイドル時間中に実行します
- hydrateOnInteraction — クリックやフォーカスなどのイベントをきっかけに実行します
- コアVueでは、これらを
defineAsyncComponentのhydrateヘルパーとして提供しています
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「遅延ハイドレーション戦略」レッスンは無料ですか？
はい。「遅延ハイドレーション戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「遅延ハイドレーション戦略」で何を学びますか？
hydrateOnIdle()、hydrateOnVisible()、hydrateOnInteraction()――Nuxtの遅延ハイドレーション ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「遅延ハイドレーション戦略」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。