Vercel 公司在 Next.js Conf 2023 上宣布了 Next.js 14。

Vercel 是流行的開源前端框架 Next.js 背后的公司，Next.js 提供了包括服務(wù)器端渲染和為 Web 應(yīng)用程序生成靜態(tài)網(wǎng)站在內(nèi)的功能。Vercel 作為一個(gè)開放的云平臺(tái)提供了網(wǎng)站托管服務(wù)，讓開發(fā)者能夠在上面開發(fā)、預(yù)覽和發(fā)布 Web 應(yīng)用，同時(shí)優(yōu)化了前端開發(fā)者的開發(fā)和部署體驗(yàn)。

Next.js 14 主要變化：

• Turbopack: App & 頁(yè)面路由通過了 5000 項(xiàng)測(cè)試

本地服務(wù)器啟動(dòng)速度提升 53%

使用 Fast Refresh 進(jìn)行代碼更新的速度提升 94%

• Server Actions (Stable): 漸進(jìn)式的增強(qiáng)突變

重新驗(yàn)證緩存數(shù)據(jù)

支持簡(jiǎn)單的函數(shù)調(diào)用

本地支持表單

• Partial Prerendering (Preview): 快速初始化靜態(tài)響應(yīng) + 流式動(dòng)態(tài)內(nèi)容
• Next.js Learn (New): 針對(duì) App Router、身份驗(yàn)證、數(shù)據(jù)庫(kù)等內(nèi)容的全新免費(fèi)課程

• Turbopack 通過 5000 項(xiàng)集成測(cè)試

底層采用 Rust 編寫的構(gòu)建引擎 Turbopack 已通過 next dev 的 5,000 項(xiàng)集成測(cè)試，這些測(cè)試包括 7 年的錯(cuò)誤修復(fù)。

Vercel 稱開發(fā)者現(xiàn)在應(yīng)該使用 next dev -turbo 會(huì)得到更快、更可靠的性能。該公司還表示，一旦 Turbopack 所有測(cè)試都通過，它將進(jìn)入穩(wěn)定狀態(tài)（目前通過了 90% 的測(cè)試）。

• Server Actions

在 Next.js 14 中，Next.js 團(tuán)隊(duì)通過穩(wěn)定版本的 Server Actions 改進(jìn)了開發(fā)者在編寫數(shù)據(jù)變更方面的體驗(yàn)。

Server Actions 允許開發(fā)者定義異步服務(wù)器函數(shù)，使用 Server Actions 來重新驗(yàn)證緩存數(shù)據(jù)、重定向到不同的路由、設(shè)置和讀取 cookie 等等。

現(xiàn)在，只需在 React 組件中定義一個(gè)函數(shù)，就能在服務(wù)器上安全地執(zhí)行操作。

下面是一個(gè)簡(jiǎn)易示例：

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

這不僅減少代碼量，還減少了更改數(shù)據(jù)和重新渲染頁(yè)面所需的網(wǎng)絡(luò)往返次數(shù)，從而提升用戶體驗(yàn)。

• 部分預(yù)渲染 (Partial Prerendering)

Next.js 團(tuán)隊(duì)正在為 Next.js 開發(fā)的” 部分預(yù)渲染 “是一種針對(duì)具有快速初始靜態(tài)響應(yīng)的動(dòng)態(tài)內(nèi)容的編譯器優(yōu)化。

Partial Prerendering 基于十年來對(duì)服務(wù)器端渲染 (SSR)、靜態(tài)網(wǎng)站生成 (SSG) 和增量靜態(tài)重驗(yàn)證 (ISR) 的研究和開發(fā)。