这是用户在 2024-6-26 11:22 为 https://readwise.io/reader/shared/01j198xjacpmyw01fv7c0pzdq6/ 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?

We added a new section in the Next.js Docs: Caching
我们在 Next.js 文档中添加了一个新部分:缓存

↳ nextjs.org/docs/app/build...

Here's the TLDR for those who want a better understanding of the different caching layers and how they relate to Server Components and newer APIs:
对于那些想要更好地了解不同缓存层以及它们与服务器组件和更新的 API 的关系的人来说,以下是 TLDR:

You can think of caching like an onion, where each layer reduces network requests to the next layer.

Next.js aims to provide sensible caching defaults and minimal configuration for the best user experience, performance, and cost.
Next.js 旨在提供合理的缓存默认值和最少的配置,以获得最佳的用户体验、性能和成本。

📦 Router Cache 📦 路由器缓存

On the client, Next.js stores the RSC Payload (split by route segment) of visited and prefetched routes in a temporary, client-side cache.
在客户端,Next.js 将访问和预取的路由的 RSC 有效负载(按路由段分割)存储在临时客户端缓存中。

This allows snappy navigation, preserves state, and avoids asking the server for UI we've already rendered.
这允许快速导航,保留状态,并避免向服务器询问我们已经渲染的 UI。

📦 Full Route Cache 📦 全路由缓存

If a route doesn't rely on request-time information such as request headers or user cookies, Next.js automatically moves the rendering work to build-time and caches the result in a geographically distributed, persistent server-side cache.
如果路由不依赖于请求时信息(例如请求标头或用户 cookie),Next.js 会自动将渲染工作移至构建时,并将结果缓存在地理上分布的持久服务器端缓存中。

Static vs. Dynamic Rendering

Caching the result of the rendering work is called Static Rendering.

Opting out of caching by using APIs that rely on request-time information and rendering a route on every request is called Dynamic Rendering.
通过使用依赖请求时间信息的 API 来选择退出缓存并在每个请求上渲染路由,这称为动态渲染。

But hold up, because you need to understand something.

In the Pages Router, caching data and caching the rendering result is coupled. E.g. SSG means static rendering w/ cached data, and SSR means dynamic rendering /w uncached data. It's binary, one or the other.
在Pages Router中,缓存数据和缓存渲染结果是耦合在一起的。例如。 SSG 表示带缓存数据的静态渲染,SSR 表示带未缓存数据的动态渲染。它是二元的,一个或另一个。

Whereas, in the App Router, rendering is cached by route segment (allows partial/streamable rendering), and data can be cached independently (allows dynamic rendering w/ cached data).
而在 App Router 中,渲染按路由段缓存(允许部分/流式渲染),并且数据可以独立缓存(允许使用缓存数据进行动态渲染)。

This is why we've avoided using SSG, SSR, ISR, or CSR. The model is different - it's hybrid 😉
这就是我们避免使用 SSG、SSR、ISR 或 CSR 的原因。该模型不同 - 它是混合动力 😉

📦 Request Memoization 📦 请求记忆

While rendering on the server, React stores the result of fetch requests in a temporary, in-memory cache.
在服务器上渲染时,React 将获取请求的结果存储在临时的内存缓存中。

This allows multiple components in a route to share the same data without executing multiple network requests to the data layer.

Request memoization allows for a more composable model:

- No global data fetching functions, context, or props drilling
- 没有全局数据获取功能、上下文或道具钻探

- Fetch data where you need it
- 在需要的地方获取数据

- Move/delete components without breaking other parts that rely on the same data
- 移动/删除组件而不破坏依赖相同数据的其他部分

- Install packages that fetch their own data
- 安装获取自己数据的包

📦 Data Cache 📦 数据缓存

While fetching data on the server, Next.js caches the result in a persistent server-side cache.
在服务器上获取数据时,Next.js 将结果缓存在持久的服务器端缓存中。

This allows cached data to be re-used across server requests and deployments. Significantly improving the performance of dynamic rendering, as some data can be reused.

♻️ Revalidation ♻️重新验证

Next.js supports fine-grained (by cache tag or route path) revalidation of data, triggered periodically or on-demand based on an event such as a webhook or form submission.
Next.js 支持细粒度(通过缓存标记或路由路径)数据重新验证,根据 Webhook 或表单提交等事件定期或按需触发。

Finally, we're entering a world where you don't have to spend time figuring out what rendering strategy to use.

You decide how to manage your data, and the framework will pick the best rendering strategy and caching semantics based on the APIs you use.
您决定如何管理数据,框架将根据您使用的 API 选择最佳渲染策略和缓存语义。

Drag to outliner or Upload
Close 关闭