下一个 JS 的 API 缓存

Question

我正在使用 Next.js 构建一个应用程序……我们每天有 10 万多个页面和内容更改，因此使用 SSR 和 getServerSideProps。

我们的一些数据来自按请求收费的无头 CMS 提供商。我想将此服务器的 API 响应缓存 24 小时。

解决这个问题的最佳方法是什么？

大多数人使用一个公共图书馆来做到这一点吗？

只是寻找我应该调查的方法的建议（或如何做到这一点的好例子）。

Answer 1

我使用了这个 npm 包：https ://www.npmjs.com/package/memory-cache

然后是这样的：

import cacheData from "memory-cache";

async function fetchWithCache(url, options) {
    const value = cacheData.get(url);
    if (value) {
        return value;
    } else {
        const hours = 24;
        const res = await fetch(url, options);
        const data = await res.json();
        cacheData.put(url, data, hours * 1000 * 60 * 60);
        return data;
    }
}

然后，如果您想使用缓存获取某些内容，只需调用此函数即可。或者它可以用作请求中的中间件。它检查数据是否已经在缓存中并返回它，或者如果没有 - 它将数据放入键下的缓存中。密钥可以是任何东西，例如我正在使用 url。

Answer 2

除了托拜厄斯·林斯的回答之外：

至少如果在 Vercel 上部署，您可以在 getStaticProps、getServerSideProps、API 路由等中使用设置的 Cache-Control 标头来缓存 Vercel 边缘网络上的响应。该解决方案不需要任何额外的依赖项和非常少的代码。

api 路由示例 - 来源 Vercel

// pages/api/user.js

export default function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=86400');
  res.status(200).json({ name: 'John Doe' });
}

getServerSideProps 中的示例 - 来源 NextJS

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

我相信你会想使用：

res.setHeader('Cache-Control', 's-maxage=1440000')

以下是 Vercel 上缓存的一些其他有用链接：

• https://vercel.com/docs/concepts/functions/edge-caching
• https://vercel.com/docs/concepts/edge-network/overview
• https://vercel.com/docs/concepts/edge-network/caching
• https://vercel.com/docs/concepts/edge-network/headers

对于您的具体情况，您可能还需要研究将 getStaticPaths 与 getStaticProps 一起使用。您可以使用fallback: truegetStaticPaths 仅在访问页面时构建页面（您仍然可以在初始构建时构建帖子热门页面）。

• https://nextjs.org/docs/basic-features/data-fetching#the-fallback-key-required

我知道这是一篇旧文章，但对于其他人（至少是在 Vercel 上部署的人）来说，这些解决方案应该对 getStaticProps 中的 revalidate 没有帮助的地方有所帮助。

Answer 3

您可以将getStaticPropsNext.js 用于 SSG

它们目前有一个revalidate您可以返回的属性，该属性定义了重新获取内容的频率。

看看这里：https : //nextjs.org/blog/next-9-5#stable-incremental-static-regeneration