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


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

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

  • 部分预渲染 (Partial Prerendering)

Next.js 团队正在为 Next.js 开发的”部分预渲染“是一种针对具有快速初始静态响应的动态内容的编译器优化。

Partial Prerendering 基于十年来对服务器端渲染 (SSR)、静态网站生成 (SSG) 和增量静态重验证 (ISR) 的研究和开发。

详情查看发布公告


相關推薦

2023-10-30

举办的 Next.js Conf 2023,里面的代码使用了名为「Server Actions」的特性——在前端代码中使用 SQL 语句直接操作数据库。 Next.js 是流行的开源前端框架,其开发商是知名创业公司 Vercel。 Next.js 提供了包括服务器端渲染和为 W

2023-05-06

产生的剩余错误,并为未来版本的稳定性做准备。 Server Actions (Alpha) 在 React 生态中,围绕着表单、管理表单状态以及数据的缓存和重新验证,已经有了很多创新和探索。 目前的解决方案要么是可重用的客户端解决方案,要么

2022-09-10

变化: 改进的 Fast Refresh:快速迭代对于本地开发工作流程至关重要。Next.js 使用 Fast Refresh 来即时反馈对 React 组件所做的编辑。.env、 jsconfig.json 和 tsconfig.json 文件现在可以热重载 TypeScript 自动安装:Next.js 内置了对自动配

2023-04-10

Next.js 13.3 近日正式发布,新版本添加了多个社区用户要求的受欢迎的功能,并会在下一个次要版本中将 App Router 标记为稳定,Next.js 13.3 具体更新内容包括: 基于文件的 Metadata API 在 Next.js 13.2 中,Next.js 公布了一个新的 Metadata

2022-08-27

:新的 Next.js 功能通常在 Netlify 平台上由 Next.js 开源团队发布之日就本地启用、测试和支持。 增强的用户体验:Next.js 开发人员在其网站和应用程序的构建和部署工作流程中可拥有无缝的用户体验。 根据介绍,目前已有一些

2022-10-26

Next.js 13 现已发布,一些亮点更新内容包括: app/ Directory (beta):更简单、更快、更少的客户端 JS。 Layouts React Server Components Streaming Turbopack (alpha):速度提高 700 倍的基于 Rust 的 Webpack 替代品。 新的 next/image&n

2022-06-30

构建步骤,可以将部署时间缩短一个数量级。近日,Fresh 发布了第一个稳定版本。 Fresh 使用了一种不同的模型:默认情况下,开发者会将 0 KB 的 JS 发送给客户端。因为大多数渲染在服务器上完成,客户端只负责重新渲染交互

2023-02-26

Next.js 13.2 近日正式发布,该版本包括对 App Router(app)的重大改进,为稳定性做准备。 内置 SEO 支持:新的元数据 API,可设置静态和动态meta标签。 路由处理程序:自定义请求处理程序,建立在 Web Request和 Response上。 MDX fo

2021-12-02

所有人都能使用 Remix。我们相信,将 Remix 以开源的方式发布将推动项目的创新,并使其他框架也能从我们取得的进展中受益。我们急于向他人学习,并回馈给他人。 由于项目刚刚开源,目前 Remix 的 GitHub 仓库内容仍在完善

2023-08-19

Flutter 3.13 现已发布,并包含 Dart 3.1。自上次发布以来的三个月时间内,此版本共合并了 724 个 PR。一些更新亮点包括: Engine 对 Impeller(新图形渲染器)进行了多项改进,并为可折叠设备添加了新的引擎 API。 Impeller iOS 性能改

2022-04-02

知名软件行业分析公司 RedMonk 发布了 2022 年 1 月(第一季度)。 RedMonk 编程语言排行榜通过追踪编程语言在 GitHub 和 Stack Overflow 上的代码使用情况与讨论数量,统计分析后进行排序,其旨在深入了解潜在的语言采用趋势。该榜

2023-09-22

四世同堂,凭什么开发 30 岁就要被干掉? Next.js 13.5 已发布。Next.js 是一个用于服务器渲染的通用 JavaScript Web 应用程序的小型框架,该框架基于 React、Webpack 和 Babel 构建,为该网站提供了强大的支持。 新版本主要变化 本

2022-04-02

础上再延长两年,至 2025 年。 Qt 5.15 LTS 于 2020 年 5 月发布,按照 Qt 的原计划以及以往的传统(即常规的 Qt 版本在标准支持下的支持期为一年,LTS 版本在标准支持下则是三年时间),Qt 5.15 LTS 的支持结束时间为 2023 年 5 月,

2022-09-12

Fresh 1.1 稳定版已发布,新版本包含许多重要的改进,使 Fresh 更易于使用、更快,并且更实用。 Fresh 是 Deno 的全新全栈 Web 框架。默认情况下,使用 Fresh 构建的网页不会向客户端发送 JavaScript。该框架没有构建步骤,可以将部署