文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React 15 RC 版本已发布!谈谈这 6 个令人惊叹的新功能

2024-11-29 22:20

关注

5月23日,Next.JS 正式公布了 15 RC(候选版本)。这几乎标志着 Next.JS 15 的所有全新功能都已经确定下来了。

图片

在这里它提供了很多全新更新,其中有 6 个我个人认为 价值较大 的全新功能(或更新),咱们一起来看一下吧!

一、create-next-app更新

图片

运行 create-next-app 时,会出现一个新的提示询问:是否要启用 Turbopack 进行本地开发(默认为No)。

✔ Would you like to use Turbopack for next dev? … No / Yes

这意味着,Next.JS 将逐步从 webpack 过渡到 Turbopack

Turbopack:最快的模块打包器之一

据 Turbopack官网 描述(真实情况有待商榷):Turbopack 比 Webpack 快 700 倍,比 Vite 快 10 倍。

可以使用 --turbo 来启用 Turbopack:

npx create-next-app@rc --turbo

二、React Compiler、React 19 的支持

Next.js App Router 建立在 React Canary 之上,这使得开发者可以在 React v19 发布之前使用这些新的 React API 。其中包括客户端和服务器的新功能,例如:Actions。

而 React Compiler 是一个 React 编译器。

React Compiler 是 React 团队在 Meta 上创建的一个新实验性编译器。该编译器通过对纯 JavaScript 语义和 React 规则的理解,可以深入理解你的代码,这使其能够为您的代码添加自动优化。编译器通过诸如 useMemo 和之类的 API 减少了开发人员必须执行的手动记忆量 useCallback - 使代码更简单、更易于维护且更不容易出错。

使用方式如下:

  1. 安装 babel-plugin-react-compiler:
npm install babel-plugin-react-compiler
  1. 然后,在 next.config.js 中添加 experimental.reactCompiler 选项 :
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
module.exports = nextConfig;
  1. 或者,可以将编译器配置为以“选择加入”模式运行,如下所示:
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};
 
module.exports = nextConfig;

3.更好地错误提示

Next.js 14.1 对错误消息和 Hydration 错误进行了改进。Next.js 15 继续在此基础上进行改进,添加了改进的 Hydration 错误视图。

Hydration 错误现在会显示错误的源代码,并提供有关如何解决问题的建议。

例如,这是 Next.js 14.1 中先前的错误消息:

图片

Next.js 15 RC 对此进行了改进:

图片

4.全新的缓存逻辑

Next.js App Router 推出了自定义缓存默认值。这些默认值旨在默认提供性能最高的选项,并可在需要时选择退出。

并不再自动缓存!

根据反馈,重新评估了缓存启发式方法以及它们如何与部分预渲染(PPR)等项目以及使用第三方库进行交互。在 Next.js 15 中,将请求、路由处理程序和客户端路由器缓存的缓存默认GET设置从默认缓存更改为默认不缓存。

如果想要缓存,那么需要手动配置,以下是一个使用 faetch API 的示例:

fetch('https://...', { cache: 'force-cache' | 'no-store' });

5.逐步采用部分预渲染(实验性)

在 Next.js 14 中,引入了部分预渲染 (PPR) - 一种结合静态和动态渲染的优化在同一页上。

除非使用动态函数,否则 Next.js 目前默认为静态渲染例如cookies()、、headers()以及未缓存的数据请求。

这些 API 将整个路由选择为动态渲染。使用 PPR,开发者可以将任何动态 UI 包装在 Suspense 边界中。当新请求进入时,Next.js 将立即提供静态 HTML shell,然后在同一个 HTTP 请求中渲染和流式传输动态部分。

为了允许逐步采用,新版本添加了 experimental_ppr 路线配置选项,用于将特定的布局和页面选择到 PPR 中:

import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
      
      
       
      
     
  };
}

6.在响应后执行代码next/after(实验性)

在处理用户请求时,服务器通常会执行与计算响应直接相关的任务。但是,开发者可能需要执行日志记录、分析和其他外部系统同步等任务。

由于这些任务与响应没有直接关系,因此用户不必等待它们完成。

after()是一个新的实验性 API,它通过允许开发者在响应完成流式传输后安排要处理的工作来解决此问题,从而使辅助任务能够在不阻塞主响应的情况下运行。

要使用它,请添加 experimental.after 到 next.config.js:

const nextConfig = {
  experimental: {
    after: true,
  },
};
 
module.exports = nextConfig;
来源:程序员Sunday内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯