我在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);
}
}
型
我想缓存这个请求的结果-
1条答案
按热度按时间guz6ccqo1#
对于nextjs v14,使用fetch API发出的请求默认情况下会被缓存。后续的API调用会使用缓存的数据。因此,您可以利用它,然后在需要新数据时重新验证。您可以read here。
更重要的是,使用react-query或类似的库,它们允许您缓存响应数据