1 月 30 日，Nuxt.js 3.10 正式發布。該版本的更新亮點如下：

• 預渲染時共享asyncData（實驗性）
• SSR 安全且可訪問的唯一 ID 生成
• 擴展 app/router.options
• 客戶端 Node.js 支持
• 更好的 cookie 響應性
• 細粒度視圖轉換支持
• 構建時路由元數據
• 構建工具模塊解析

預渲染時共享 asyncData

當我們預渲染路由（即預先生成HTML內容）時，由于每個頁面都是獨立渲染的，如果我們沒有采取適當的措施，可能會導致在每個頁面中都重新獲取相同的數據。這會導致不必要的API調用和可能的性能問題。

在 Nuxt 2 中，可以創建一個數據集，這個數據集可以在多個頁面中被訪問和重用。這樣，只需要獲取一次數據，就可以在多個頁面中使用它。但這是需要手動設置的。

在 Nuxt 3 中，開發者可以繼續使用useAsyncData和useFetch這樣的鉤子來獲取數據。但通過 v3.10 的改進，Nuxt 3 現在能夠自動處理數據的去重和緩存。這意味著，當預渲染多個頁面時，如果這些頁面需要相同的數據，Nuxt 3會自動確保這些數據只被獲取一次，并在多個頁面之間共享。這樣，開發者就不需要手動設置數據的共享和緩存了。

export defineNuxtConfig({ 
  experimental: { 
    sharedPrerenderData: true
  } 
})

SSR 安全且可訪問的唯一 ID 生成

在 v3.10版本中，提供了一個 useId 組合式函數，用于生成 SSR 安全的唯一 ID。這有助于創建更易于訪問的應用界面。

<script setup>
const emailId = useId()
const passwordId = useId()
</script>

<template>
  <form>
    <label :for="emailId">Email</label>
    <input
      :id="emailId"
      name="email"
      type="email"
    >
    <label :for="passwordId">Password</label>
    <input
      :id="passwordId"
      name="password"
      type="password"
    >
  </form>
</template>

擴展 app/router.options

如今，模塊開發者可以輕松地注入自定義的router.options。借助全新的pages:routerOptions鉤子，他們能實現諸多功能，如自定義 **scrollBehavior**，或動態調整路由設置。

客戶端 Node.js 支持

現在，Nuxt 已實驗性地支持在客戶端代碼中為關鍵的Node.js內置功能提供polyfill。這意味著，當你在編寫客戶端代碼時，可以直接從Node.js的內置模塊導入功能，就像在服務器端使用Nitro一樣。但是，與服務器端不同，我們不會為你全局地注入任何內容，以避免不必要地增加你的代碼包的大小。你需要根據你的需求在需要的地方進行導入。

import { Buffer } from 'node:buffer'
import process from 'node:process'

或者提供自己的 polyfill，例如在 Nuxt 插件中。

import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

這應該會讓那些正在使用沒有適當瀏覽器支持的庫的用戶的工作變得更輕松。但是，由于增加包大小的風險，強烈建議用戶如果可能的話，選擇其他替代方案。

更好的 cookie 響應性

現在允許選擇使用 CookieStore。如果瀏覽器支持，那么在更新 cookies 時，將使用 CookieStore 替代 BroadcastChannel 來響應地更新 useCookie 值。此外，還提供了一個新的函數 refreshCookie，允許手動刷新 cookie 值，例如在執行請求之后。

細粒度視圖轉換支持

現在，可以使用 definePageMeta 函數在每個頁面上精細控制視圖轉換的支持。

在使用之前，請確保啟用了實驗性的視圖轉換支持功能。

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    viewTransition: false
  }
})

并且可以選擇性地啟用/禁用粒度化的支持：

<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>

如果用戶的瀏覽器偏好減少動畫，Nuxt 將不會應用視圖轉換。可以將 viewTransition 設置為 'always'，但最終還是要尊重用戶的偏好。

構建時路由元數據

現在可以在構建時訪問在 definePageMeta 中定義的路由元數據，允許模塊和鉤子函數修改和更改這些值。

export default defineNuxtConfig({
  experimental: {
    scanPageMeta: true
  }
})

未來的版本中，默認情況下將啟用此功能，以提高性能，并支持諸如 @nuxtjs/i18n 等模塊與在 definePageMeta 中設置的路由選項更深入地集成。

構建工具模塊解析

Nuxt 團隊最近對模塊的解析方式進行了優化。通過啟用 TypeScript 的構建工具解析，更準確地模擬了在 Nuxt 項目中解決子路徑導入模塊的實際過程。

這種“構建工具”模塊解析方式受到 Vue 和 Vite 的推薦，但遺憾的是，許多包的 package.json 文件中并沒有正確配置相關項。作為改進措施的一部分，我們在整個生態系統中提出了 85 個 PR，用于測試切換默認解析方式，并修復了一些問題。

可以通過以下方式來關閉此行為：

export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false
  }
})

升級

可以通過以下方式來升級最新版本：

nuxi upgrade --force

這也將刷新 lockfile，并確保獲取 Nuxt 所依賴的其他依賴項的更新，尤其是在 unjs 生態系統中的更新。