nuxt4-patterns

Topics in the source

• 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

This is an excerpt. Refer to the complete source and its current requirements.