生命週期 (Lifecycle)

Nuxt 應用程式的生命週期橫跨了伺服器端 (Server) 與客戶端 (Client)。理解這些階段對於資料獲取、插件執行順序以及效能優化至關重要。

生命週期概覽

Nuxt 的生命週期可以分為三個主要階段：

1. Server Phase (Nitro)

當請求到達伺服器時，Nitro 引擎會先處理。這包括執行 Server Middleware、解析路由，並啟動 Nuxt App 進行 SSR 渲染。

2. Nuxt App Initialization

無論是在伺服器端還是客戶端，Nuxt App 都會進行初始化。這時會依序執行 Plugins、建立 Pinia Store、執行 Middleware。

3. Vue Component Lifecycle

最後進入 Vue 的元件生命週期。注意 onMounted 僅在客戶端執行，而 setup() 會在兩端執行。

App Hooks (Runtime)

您可以在 plugins/ 或 app.vue 中使用 useNuxtApp().hook() 來監聽這些事件。

plugins/lifecycle.ts

export default defineNuxtPlugin((nuxtApp) => {
  // 當 Nuxt App 實例建立完成時
  nuxtApp.hook('app:created', (vueApp) => {
    console.log('App created!')
  })

  // 當 Vue 應用程式掛載到 DOM 後 (僅 Client)
  nuxtApp.hook('app:mounted', (vueApp) => {
    console.log('App mounted!')
  })

  // 當發生錯誤時
  nuxtApp.hook('app:error', (err) => {
    console.error('Global error:', err)
  })
})

Component Hooks

在 Vue 元件中，理解 SSR 與 CSR 的差異至關重要。

Hook	Server Side	Client Side
setup()	✅ Yes	✅ Yes
onBeforeMount	❌ No	✅ Yes
onMounted	❌ No	✅ Yes
useAsyncData	✅ Yes (Prefetch)	⚠️ Hydration Only

避免 Hydration Mismatch

不要在 setup() 中使用 window 或 document，因為它們在伺服器端不存在。請將這些邏輯移至 onMounted。

Nitro Hooks

Nitro 也有自己的生命週期 Hooks (位於 Server 端)，主要用於擴充伺服器功能或攔截請求。

server/plugins/nitro.ts

// server/plugins/nitro.ts
export default defineNitroPlugin((nitroApp) => {
  // 攔截所有請求
  nitroApp.hooks.hook('request', (event) => {
    console.log('Incoming request:', event.path)
  })

  // 在回應發送前
  nitroApp.hooks.hook('beforeResponse', (event) => {
    // 可以添加自定義 Headers
  })
})