What's new in Next.js 15

昨天 Nextjs Conf 2024 宣布正式发布 Next.js 15 以及过去一年的改变，Next.js 15 相比 13 到 14 变更其实不大，其中比较主要的是开放了缓存配置，之前缓存策略都是默认设置好的，但是缓存策略过于激进。

之前的不管是数据获取，还是路由页面默认都是有缓存的，很容易导致出现意料之外的问题。

现在推出了 "use cache" 指令，可以放在文件的顶部缓存整个页面，也可以放在异步函数中单独缓存某个函数，可以通过cacheLife("minutes")来控制缓存时间，fetch 也从之前的默认缓存 GET 改成了默认不缓存，当然可以使用 cache 参数来控制让它去缓存。

"use cache"
 
export default async function Layout({ children }) {
  const response = await fetch(...)
  const data = await response.json()
  return <html>
    <body>
      <div>{data.notice}</div>
      {children}
    </body>
  </html>
}

async function getNotice() {
  "use cache"
  const response = await fetch(...)
  const data = await response.json()
  return data.notice;
}
 
export default async function Layout({ children }) {
  return <html>
    <body>
      <h1>{await getNotice()}</h1>
      {children}
    </body>
  </html>
}

然后就是支持了 React 19 以及 React Compiler，还有 Turbopack 进入了稳定版本，另外 Hydration 错误信息也做了优化，之前指引的代码位置基本不可用，现在可以显示真实源码树中位置。

另外提供了一个比较有意思的叫做 after 的 hook，这个 hook 跟 Go 中的 defer 差不多，函数执行完毕之后调用的钩子函数。

after(() => {
  // Execute after the layout is rendered and sent to the user
  log()
})

还有就是部分预渲染，现在如果是用 Suspense 包裹起来的组件默认会生成 fallback 内容，对于静态部分直接返回预渲染的内容，以及同时生成动态组件部分，此时预渲染的部分也在同时下载资源文件，达到了一个并行的效果，不需要等待资源文件下载完成再去发送请求动态资源。