Next.js 14 发布：Server Actions 已稳定、部分预渲染进入预览

OSC 请你来轰趴啦！1028 苏州源创会，一起寻宝 AI 时代

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

Vercel 是流行的开源前端框架 Next.js 背后的公司，Next.js 提供了包括服务器端渲染和为 Web 应用程序生成静态网站在内的功能。Vercel 作为一个开放的云平台提供了网站托管服务，让开发者能够在上面开发、预览和发布 Web 应用，同时优化了前端开发者的开发和部署体验。

Next.js 14 主要变化：

Turbopack: App & 页面路由通过了 5000 项测试
- 本地服务器启动速度提升 53%
- 使用 Fast Refresh 进行代码更新的速度提升 94%
Server Actions (Stable): 渐进式的增强突变
- 重新验证缓存数据
- 支持简单的函数调用
- 本地支持表单
Partial Prerendering (Preview): 快速初始化静态响应 + 流式动态内容
Next.js Learn (New): 针对 App Router、身份验证、数据库等内容的全新免费课程

Turbopack 通过 5000 项集成测试

底层采用 Rust 编写的构建引擎 Turbopack 已通过next dev 的 5,000 项集成测试，这些测试包括 7 年的错误修复。

Vercel 称开发者现在应该使用next dev -turbo会得到更快、更可靠的性能。该公司还表示，一旦 Turbopack 所有测试都通过，它将进入稳定状态（目前通过了 90% 的测试）。

Server Actions

在 Next.js 14 中，Next.js 团队通过稳定版本的 Server Actions 改进了开发者在编写数据变更方面的体验。

Server Actions 允许开发者定义异步服务器函数，使用 Server Actions 来重新验证缓存数据、重定向到不同的路由、设置和读取 cookie 等等。

现在，只需在 React 组件中定义一个函数，就能在服务器上安全地执行操作。

下面是一个简易示例：

 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>   ); }

这不仅减少代码量，还减少了更改数据和重新渲染页面所需的网络往返次数，从而提升用户体验。