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()コンポーザブルを使用します。- SSR でレンダリングされたマークアップを駆動するために
route.fullPathを使用しないでください。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: ビルド時に静的 HTMLswr: キャッシュされたコンテンツを提供し、バックグラウンドで再検証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 および鮮度要件と一致している
- 重いインタラクティブアイランドは遅延読み込みまたは遅延ハイドレートされている