Next.js 15 RC 终于把该死的缓存给去掉了!

3,630 阅读3分钟

大家好,我是双越老师,也是 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 组件代码,自动帮我们增加 useMemouseCallback 来优化组件渲染。不过现在它还在实验性的阶段。

去掉默认的缓存机制

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 不会有缓存,刷新页面会更新。

image.png

PPR 部分预渲染(实验阶段)

对于一个组件,如果其中没有任何动态内容,全是静态文本或图片等,Next.js 会构建为静态组件,每次请求直接返回。如果组件中有动态内容,Next.js 会构建为动态组件,每次请求时需要计算动态生成内容。

而 PPR Partial PreRendering 就增加了第三种可能性,一个组件中,静态部分和动态部分分别构建和渲染,每次请求只计算动态部分。

PPR 目前还在实验阶段,大家可以通过这个 demo www.partialprerendering.com/ 来体验效果

Kapture 2024-07-31 at 17.15.43.gif

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 设计。

image.png

而且,还可以在本地启用 Turbopack 构建工具,提高构建效率

npx create-next-app@rc --turbo

最后

Next.js 15 + React 19 是一套非常强大的组合,可能 React Compiler 和 PPR 还需要一段时间才能稳定。

但他们都正式发布,却稳定一段时间以后,我将会升级到 划水AI 项目中,到时再和大家分享~