Nuxt4 Patterns

# Nuxt 4パターン

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

## アクティベートするタイミング

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

## ハイドレーション安全性

- 最初のレンダリングを決定論的に保つ。SSRレンダリングされたテンプレートの状態に`Date.now()`、`Math.random()`、ブラウザのみのAPI、またはストレージ読み取りを直接入れないこと。
- サーバーが同じマークアップを生成できない場合、ブラウザのみのロジックを`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'`を処理する。
- `server: false`はSEOや最初のペイントに不要なデータのみに使用する。
- `pick`でペイロードサイズを削減し、深いリアクティビティが不要な場合はより浅いペイロードを優先する。