nuxt-delay-hydration

ステータス: 安定版 v2 v0 ✅ , v3 main ✅ 私のスポンサー プログラム 💖 によって実現しました フォローしてください @harlan_zw 🐦

⚠️ これは、Google Lighthouse にサイトが実際よりも高速であると誤認させるための「ハック」です。

• 漸進的に強化されたウェブサイトでのみ使用する必要があります。
• 実際のパフォーマンスやSEO効果が得られない場合があります（Google Lighthouseではなく、CrUX でテストしてください）。

機能

• 🔥 サイトの「ブロッキング時間」を削減
• 🚦 ルートルールを使用したページレベルの設定
• 🔁 （オプション）ハイドレーション前のクリックを再現

インストール

Nuxt 2.xを使用している場合は、v0ブランチ のドキュメントに従ってください。⚠️ Nuxt 2は非推奨であり、サポートされません。

npx nuxi@latest module add delay-hydration

要件：漸進的に強化されたSSRまたはSSG Nuxtアプリ。

使用方法

// nuxt.config.ts
export default {
  modules: [
    'nuxt-delay-hydration',
  ],
  delayHydration: {
    // enables nuxt-delay-hydration in dev mode for testing
    // NOTE: you should disable this once you've finished testing, it will break HMR
    debug: process.env.NODE_ENV === 'development'
  }
}

注：デバッグを有効にしていない限り、開発モードではモジュールは実行されません。

モードの選択

デフォルトでは、モードは選択されません。モジュールの動作方法を選択する必要があります。

タイプ: init | mount| manual | false

デフォルト: false

選択したモードに関係なく、さらなる最適化をお読みください。

Initモード

このモードは、ハイドレーションのプロミスが解決されるまで、すべてのスクリプトのロードを遅らせます。

これはHTMLレンダリングにフックし、すべてのスクリプトタグを削除して、ハイドレーションのプロミスが解決された後に追加することで実現されます。

これにより、最大の速度向上が得られますが、最もリスクが高いです。

長所：ブロッキング時間の削減が最大になります

短所：重要なサードパーティスクリプトがある場合はリスクがあります

ベンチマーク：約90〜100％削減

export default {
  delayHydration: {
    mode: 'init'
  }
}

Mountモード

このモードは、マウント中にNuxtを遅らせます。プラグインと一部のサードパーティスクリプトは機能します。

レイアウトとページコンポーネントを遅らせます。

長所：安全で、それでも優れた改善を提供します

短所：jsに依存する特定のレイアウトを壊す可能性があります。

ベンチマーク：約70％削減

export default {
  delayHydration: {
    mode: 'mount'
  }
}

Manualモード

Manualモードを使用すると、アプリのどの部分を遅らせるかを手動で指定できます。ナビゲーションドロワーなど、ページの一部を常にすぐにハイドレーションする必要がある場合に役立ちます。

長所：最適化するための最も安全な方法

短所：速度の改善は使用状況に基づきます

export default {
  delayHydration: {
    mode: 'manual'
  }
}

DelayHydrationコンポーネント

モードを設定したら、コンポーネントを使用する必要があります。

<template>
  <div>
    <DelayHydration>
      <div>
        <LazyMyExpensiveComponent />
      </div>
    </DelayHydration>
  </div>
</template>

ガイド

ページごとの設定

ルートルールを使用して、ページごとにモジュールを設定できます。

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // delay the home page
    '/': { delayHydration: 'mount' },
    // disable the module for the admin
    '/admin/': { delayHydration: false }
  }
})

defineRouteRulesを使用して、ページレベルで定義することもできます。

デバッグ

export default defineNuxtConfig({
  delayHydration: {
    debug: process.env.NODE_ENV === 'development',
  },
})

<template>
  <div>
    <MyHeader />
    <DelayHydration>
      <div>
        <!-- Show the hydration status, only for debugging -->
        <HydrationStatus />
        <main>
          <nuxt />
        </main>
        <my-footer />
      </div>
    </DelayHydration>
  </div>
</template>

パフォーマンス監査

私の監査ツールを使用してください：https://unlighthouse.dev/

ハイドレーションクリックの再現

export default defineNuxtConfig({
  delayHydration: {
    replayClick: true
  },
})

さらなる最適化

高度な設定

設定は、Nuxt設定内のdelayHydrationキーで提供する必要があります。

ラボまたはフィールドデータのパフォーマンスが低い場合は、この高度な設定を調整することをお勧めします。

ルートのフィルタリング

注：これらのフィルタリングオプションではなく、ルートルールを使用することをお勧めします。

includeオプションとexcludeオプションを使用して、ハイドレーションを遅らせるルートを指定できます。

// nuxt.config.ts
export default defineNuxtConfig({
  delayHydration: {
    include: [
      '/blog/**',
    ],
    exclude: [
      '/admin/**'
    ],
  },
})

ルートルールと同様のglobパターンまたは正規表現を指定できます。

イベントハイドレーション

hydrateOnEvents

• タイプ：string[]
• デフォルト：[ 'mousemove', 'scroll', 'keydown', 'click', 'touchstart', 'wheel' ]

ハイドレーションを再開するトリガーとなるブラウザイベントを制御します。デフォルトでは、潜在的なユーザーエクスペリエンスの問題を回避するために非常に積極的です。

replayClick

• タイプ：boolean
• デフォルト：false

ハイドレーションのトリガーがクリックだった場合、それを再現できます。再現すると、アプリがハイドレーションされたと推定されたときにイベントが再実行されます。

たとえば、ユーザーがハンバーガーアイコンをクリックし、メニューを開くためにハイドレーションが必要な場合、ハイドレーションされたらクリックが再現されます。

⚠️ これは実験的です。注意して使用してください。

アイドルハイドレーション

idleCallbackTimeout

• タイプ：number（ミリ秒）
• デフォルト：7000

アイドルコールバックを待機している場合、ミリ秒単位で待機する最大時間を定義できます。これは、多くのネットワークリクエストが発生している場合に役立ちます。

postIdleTimeout

• タイプ：{ mobile: number, desktop: number }（ミリ秒）
• デフォルト：{ mobile: 5000, desktop: 4000, }

アイドルコールバック後、ハイドレーションを再開する前に待機する時間（ミリ秒単位）。この追加のタイムアウトは標準の「ブロッキング」を回避するために必要であり、Lighthouseに実際のアイドル時間を提供する必要があります。

CPU容量はデスクトップよりもはるかに少ないため、モバイルは常にデスクトップよりも高い必要があります。

注：さらなるベンチマークに基づいて、デフォルトは将来カスタマイズされる可能性があります。

デバッグ

debug

• タイプ：boolean
• デフォルト：false

ハイドレーションがブロックされているとき、いつ、なぜブロック解除されるのかをコンソールに詳細をログします。

ベンチマーク

• ポケモン
• 国
• 手動

ライブ例

• https://www.odysseytraveller.com/
• https://massivemonster.co/

クレジット

• Markus Oberlehner。Vueでの遅延ハイドレーションの先駆者

スポンサー

ライセンス

MIT License © 2022 - 現在 Harlan Wilton