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から…