缓存控制

在路由模块中

每个路由还可以定义其 http 标头。这对于 http 缓存最为重要。Remix 不依赖于将您的网站构建为静态文件并上传到 CDN 以提高性能，而是依赖于缓存标头。两种方法的最终结果都是一样的：CDN 上的静态文档。查看此视频了解更多信息。

通常，缓存标头的难点在于配置它们。在 Remix 中，我们让这变得简单。只需从您的路由中导出 headers 函数即可。

export function headers() {
  return {
    "Cache-Control": "public, max-age=300, s-maxage=3600",
  };
}

export function meta() {
  /* ... */
}

export default function Gists() {
  /* ... */
}

max-age 指示用户的浏览器缓存该内容 300 秒，即 5 分钟。这意味着，如果他们在 5 分钟内再次点击返回或指向同一页面的链接，浏览器甚至不会对该页面发出请求，而是会使用缓存。

s-maxage 指示 CDN 将其缓存一小时。当第一个人访问我们的网站时，它看起来是这样的：

请求进入网站，这实际上是 CDN
CDN 没有缓存文档，因此它向我们的服务器（原始服务器）发出请求。
我们的服务器构建页面并将其发送到 CDN
CDN 缓存它并将其发送给访问者。

现在，当下一个人访问我们的页面时，它看起来像这样：

请求到达 CDN
CDN 已缓存文档并立即发送，无需触及我们的原始服务器！

我们在 CDN 缓存指南中对缓存还有很多内容要说，请务必找时间阅读。

在 Loaders 中

我们看到我们的路由可以定义它们的缓存控制，那么这对加载器来说为什么重要呢？这有两个原因：

首先，由于数据比标记更频繁地变化，因此数据通常比路由更了解缓存控制应该是什么。因此，加载器的标头会传递给路由的标头函数。

打开 app/routes/gists.ts 并更新你的标头函数，如下所示：

export function headers({
  loaderHeaders,
}: {
  loaderHeaders: Headers;
}) {
  return {
    "Cache-Control": loaderHeaders.get("Cache-Control"),
  };
}

loaderHeaders 对象是 Web Fetch API Headers 构造函数的一个实例

现在，当浏览器或 CDN 想要缓存我们的页面时，它会从我们的数据源获取标头，这通常是您想要的。请注意，在我们的例子中，我们实际上只是使用 GitHub 在我们的提取响应中发送的标头！

这很重要的第二个原因是，Remix 在客户端转换时通过浏览器中的 fetch 调用您的加载器。通过在此处返回良好的缓存标头，当用户单击后退 / 前进或多次访问同一页面时，浏览器实际上不会再次请求数据，而是使用缓存版本。这大大加快了网站的性能，即使对于您无法在 CDN 上缓存的页面也是如此。许多 React 应用程序都依赖于 JavaScript 缓存，但浏览器缓存已经运行良好！