在NextJS API路由中缓存响应数据

6qftjkof  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(126)

我在NextJS中有一个API路由:
1.从第三方获取一些新闻数据(使用“fetch”)
1.调用google translate来转换结果数据(也是一些fetch)。
1.返回翻译后的数据
我的问题是,在每个请求中,服务器调用google-translate c,这可能需要一段时间。响应不经常改变,因为新闻每月更新一次。有没有一种方法可以缓存响应以备将来的请求。
我试过这个:

res.setHeader(
    "Cache-Control",
    "public, s-maxage=3600, stale-while-revalidate=59"
  );

字符串
但是响应时间并没有好到哪里去(根据我的测试)。
你有任何想法如何着手建立一个适当的缓存与给定的生命周期?
下面是我的查询的样子(in the file/pages/API/anything`):

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
)
  //fetch
  try {
    const post = await fetch("https://gatenine.ch/wp-json/wp/v2/posts")
      .then((res) => res.json())
      .then((data) =>
        data.map((item: any) =>
          _.pick(
            item,
            "yoast_head_json",
            "title",
            "description",
            "modified",
            "content"
          )
        )
      );
    console.log(post);
    try {
      //parse and translate
      const newPost = await Promise.all(
        post.map(async (element: any) => {
          const fr = await translate(
            [element.title.rendered, element.content.rendered],
            {
              from: "de",
              to: "fr",
            }
          )
            .then((data: any) => {
              return data;
            })
            .catch((err: any) => {
              console.log(err);
              return null;
            });
          var nO = element;
          if (fr != null) {
            nO = _.extend(element, { frTitle: fr[0] }, { frContent: fr[1] });
          } else {
            nO = _.extend(
              element,
              { frTitle: element.title.rendered },
              { frContent: element.content.rendered }
            );
          }
          return nO;
        })
      );
      return res
        .status(200)
        .json({ message: "news successfully retrieved", data: newPost });
    } catch (e) {
      console.log("failed during transalation");
      console.log(e);
      return res
        .status(200)
        .json({ message: "news successfully retrieved", data: post });
    }
  } catch (e) {
    console.log("failed during fetch");
    res.status(500);
  }
}


我想缓存这个请求的结果-

guz6ccqo

guz6ccqo1#

对于nextjs v14,使用fetch API发出的请求默认情况下会被缓存。后续的API调用会使用缓存的数据。因此,您可以利用它,然后在需要新数据时重新验证。您可以read here
更重要的是,使用react-query或类似的库,它们允许您缓存响应数据

相关问题