Nuxt 4 パターン

Nuxt 4 パターン は何をしますか？

SSR、ハイブリッドレンダリング、ルートルール、またはページレベルでのデータフェッチングを使用する Nuxt 4 アプリの構築やデバッグ時に使用します。

アクティブ化のタイミング

• サーバーの HTML とクライアントの状態の間でのハイドレーション不一致
• プリレンダリング、SWR、ISR、またはクライアント専用セクションなどのルートレベルのレンダリング決定
• 遅延ロード、遅延ハイドレーション、ペイロードサイズに関するパフォーマンス作業
• useFetch、useAsyncData、または $fetch を使用したページまたはコンポーネントのデータフェッチング
• ルートパラメータ、ミドルウェア、または SSR/クライアントの違いに関連する Nuxt ルーティングの問題

ハイドレーション安全性

• 最初のレンダリングは決定論的にします。Date.now()、Math.random()、ブラウザ専用 API、またはストレージ読み取りを SSR でレンダリングされたテンプレートの状態に直接入れないでください。
• サーバーが同じマークアップを生成できない場合は、ブラウザ専用ロジックを onMounted()、import.meta.client、ClientOnly、または .client.vue コンポーネントの背後に移動します。
• vue-router のものではなく、Nuxt の useRoute() コンポーザブルを使用します。
• route.fullPath を使用して SSR でレンダリングされたマークアップを駆動しないでください。URL フラグメントはクライアント専用であり、ハイドレーション不一致を引き起こす可能性があります。
• ssr: false は、真にブラウザ専用の領域のためのエスケープハッチとして扱い、不一致のデフォルトの修正として使用しないでください。

データフェッチング

• ページやコンポーネントでの SSR セーフな API 読み取りには、await useFetch() を優先します。サーバーでフェッチされたデータを Nuxt ペイロードに転送し、ハイドレーション時の 2 回目のフェッチを回避します。
• フェッチャーが単純な $fetch() 呼び出しでない場合、カスタムキーが必要な場合、または複数の非同期ソースを構成する場合に useAsyncData() を使用します。
• キャッシュの再利用と予測可能なリフレッシュ動作のために、useAsyncData() に安定したキーを指定します。
• useAsyncData() ハンドラーを副作用なしに保ちます。これらは SSR およびハイドレーション中に実行される可能性があります。
• ユーザーがトリガーする書き込みやクライアント専用のアクションには $fetch() を使用し、SSR からハイドレーションされるべきトップレベルのページデータには使用しないでください。
• ナビゲーションをブロックしてはならない重要でないデータには、lazy: true、useLazyFetch()、または useLazyAsyncData() を使用します。UI で status === 'pending' を処理します。
• SEO や最初のペイントに必要ないデータに対してのみ server: false を使用します。
• pick を使用してペイロードサイズを削減し、深いリアクティビティが不要な場合は浅いペイロードを優先します。

const route = useRoute()

const { data: article, status, error, refresh } = await useAsyncData(
  () => `article:${route.params.slug}`,
  () => $fetch(`/api/articles/${route.params.slug}`),
)

const { data: comments } = await useFetch(`/api/articles/${route.params.slug}/comments`, {
  lazy: true,
  server: false,
})

ルートルール

レンダリングとキャッシュ戦略には nuxt.config.ts の routeRules を優先します:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/products/**': { swr: 3600 },
    '/blog/**': { isr: true },
    '/admin/**': { ssr: false },
    '/api/**': { cache: { maxAge: 60 * 60 } },
  },
})

• prerender: ビルド時に静的な HTML
• swr: キャッシュされたコンテンツを提供し、バックグラウンドで再検証
• isr: サポートされているプラットフォームでのインクリメンタル静的再生成
• ssr: false: クライアントレンダリングルート
• cache または redirect: Nitro レベルのレスポンス動作

ルートルールはグローバルではなく、ルートグループごとに選択します。マーケティングページ、カタログ、ダッシュボード、API は通常、異なる戦略を必要とします。

遅延ロードとパフォーマンス

• Nuxt はすでにルートごとにページをコード分割しています。コンポーネント分割をマイクロ最適化する前に、ルート境界が意味のあるものであることを確認します。
• Lazy プレフィックスを使用して、重要でないコンポーネントを動的にインポートします。
• v-if を使用して遅延コンポーネントを条件付きでレンダリングし、UI が実際に必要になるまでチャンクがロードされないようにします。
• 画面外や重要でないインタラクティブ UI には遅延ハイドレーションを使用します。

<template>
  <LazyRecommendations v-if="showRecommendations" />
  <LazyProductGallery hydrate-on-visible />
</template>

• カスタム戦略には、可視性またはアイドル戦略を指定して defineLazyHydrationComponent() を使用します。
• Nuxt の遅延ハイドレーションはシングルファイルコンポーネントで機能します。遅延ハイドレーションされたコンポーネントに新しい props を渡すと、すぐにハイドレーションがトリガーされます。
• 内部ナビゲーションには NuxtLink を使用して、Nuxt がルートコンポーネントと生成されたペイロードをプリフェッチできるようにします。

レビューチェックリスト

• 最初の SSR レンダリングとハイドレーションされたクライアントレンダリングが同じマークアップを生成する
• ページデータが useFetch または useAsyncData を使用し、トップレベルの $fetch を使用していない
• 重要でないデータは遅延され、明示的なローディング UI がある
• ルートルールがページの SEO および鮮度要件に一致している
• ヘビーなインタラクティブアイランドが遅延ロードまたは遅延ハイドレーションされている