nuxt4-patterns

name	nuxt4-patterns
description	Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.
origin	ECC

Nuxt 4 Patterns

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

起動条件

• サーバー HTML とクライアントステートの間のハイドレーションミスマッチ
• prerender、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() 呼び出しでない場合、カスタムキーが必要な場合、または複数の非同期ソースを組み合わせる場合は を使用します。