大家好,我是双越老师,也是 wangEditor 作者
前段时间 Next.js 发布了 15 RC 版本,包含了很多新功能,其中最关键的是:去掉了默认的缓存功能。
我正在使用 React + Next.js 开发一个 Node 全栈 AIGC 知识库项目 划水AI :富文本编辑器,多人协同编辑,AI 写作,AI 处理文本 ... 有兴趣的可以围观项目~
集成 React19
前几天我写的博客 React19 升级哪些 Hook 和 API ,可以去看看 React19 最新的功能升级。
Next.js 在等待 React19 正式发布,它才能正式发布 Nextjs15 版本。现在两者都是 RC 版本,尚未正式发布。
Next.js 也会集成 React Compiler, 它是 React 团队一直在研究的一个优化工具,它可以分析 React 组件代码,自动帮我们增加 useMemo
和 useCallback
来优化组件渲染。不过现在它还在实验性的阶段。
去掉默认的缓存机制
Next.js 14 为了提高系统的效率,增加了三种缓存机制
fetch
请求默认缓存:Next.js 封装了fetch
API 增加了缓存,多次请求结果一致get
API 接口数据会默认缓存: 在 Next.js 定义的 GET API 会缓存,请求第一次,以后就会缓存- 客户端路由缓存:访问一次页面,再次访问时结果一致
这些缓存确实增加了页面性能,同时也增加了开发者的困惑,尤其的新入门 Next.js 的用户。不是每个用户都能认真阅读文档,也不是阅读一遍就能记住。
我自己使用 Next.js 14 开发 划水AI 的时候就有过这种体会:A 页面更新了,跳转到 B ,再跳转回 A 又显示未更新的内容…… 很苦恼。
Next.js 15 RC 全部去掉了这三个默认缓存功能,如果你想要缓存,自己通过配置增加。这才是正确的方式:默认没有,我想要我自己加。
这有一个例子,如下图。服务端组件中 fetch
请求一个 API 接口,生成随机数。Next.js 14 会有缓存,刷新页面不会更新。而 Next.js 15 不会有缓存,刷新页面会更新。
PPR 部分预渲染(实验阶段)
对于一个组件,如果其中没有任何动态内容,全是静态文本或图片等,Next.js 会构建为静态组件,每次请求直接返回。如果组件中有动态内容,Next.js 会构建为动态组件,每次请求时需要计算动态生成内容。
而 PPR Partial PreRendering 就增加了第三种可能性,一个组件中,静态部分和动态部分分别构建和渲染,每次请求只计算动态部分。
PPR 目前还在实验阶段,大家可以通过这个 demo www.partialprerendering.com/ 来体验效果
next/after(实验阶段)
服务端代码在处理一个 http 请求时,会先计算,或获取数据库内容,最后在 response 返回。一般在 response 返回之后就不能在执行代码了。
Next.js 提供了一个在 response 返回以后还能执行代码的 API next/after
,使用非常简单。
import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
export default function Layout({ children }) {
// Secondary task
after(() => {
log();
});
// Primary task
return <>{children}</>;
}
当我们有一些和返回结果无关的计算(如日志、统计、离线计算等),可以在 next/after
中完成,而不影响接口返回速度。
create-next-app
在 Next.js 15 版本,脚手架 create-next-app 也更新升级了,并有了新的 UI 设计。
而且,还可以在本地启用 Turbopack 构建工具,提高构建效率
npx create-next-app@rc --turbo
最后
Next.js 15 + React 19 是一套非常强大的组合,可能 React Compiler 和 PPR 还需要一段时间才能稳定。
但他们都正式发布,却稳定一段时间以后,我将会升级到 划水AI 项目中,到时再和大家分享~