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元件內部。 - 使用 Nuxt 的
useRoute()組合式函數，而不是vue-router中的那個。 - 不要使用
route.fullPath來驅動 SSR 渲染的標記。URL 片段僅適用於客戶端，這可能會導致水合不匹配。 - 將
ssr: false視為僅用於瀏覽器區域的應急方案，而不是解決不匹配問題的預設方法。
資料擷取
- 對於頁面和元件中的 SSR 安全 API 讀取，建議使用
await useFetch()。它將伺服器擷取的資料轉發到 Nuxt 有效負載中，並避免在水合時進行第二次擷取。 - 當獲取器不是簡單的
$fetch()呼叫、需要自訂鍵或組合多個非同步來源時，請使用useAsyncData()。 - 為
useAsyncData()提供一個穩定的鍵，以實現快取重用和可預測的重新整理行為。 - 保持
useAsyncData()處理程序無副作用。它們可以在 SSR 和水合期間執行。 - 對於使用者觸發的寫入或僅限用戶端的操作，請使用
$fetch()，而不是應從 SSR 水合的頂層頁面資料。 - 對於不應阻塞導航的非關鍵資料，請使用
lazy: true、useLazyFetch()或useLazyAsyncData()。在使用者介面中處理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條件渲染懶加載元件，以便僅在使用者介面實際需要時才載入程式碼區塊。 - 對摺疊以下或非關鍵的互動式使用者介面使用懶水合。
<template>
<LazyRecommendations v-if="showRecommendations" />
<LazyProductGallery hydrate-on-visible />
</template>
- 對於自訂策略，請使用帶有可見性或空閒策略的
defineLazyHydrationComponent()。 - Nuxt 懶水合適用於單檔案元件。向懶水合元件傳遞新 props 會立即觸發水合。
- 使用
NuxtLink進行內部導航，以便 Nuxt 可以預取路由元件和生成的有效負載。
審查清單
- 首個 SSR 渲染和水合後的客戶端渲染產生相同的標記
- 頁面資料使用
useFetch或useAsyncData，而不是頂層的$fetch - 非關鍵資料是懶加載的，並且有明確的載入使用者介面
- 路由規則符合頁面的 SEO 和新鮮度要求
- 沉重的互動島嶼是懶加載或懶水合的