javascript - 如何为 getServerSideProps 启用缓存？

Question

我们只有很少的页面和组件作为服务器端渲染。

我们试图对少数 API 响应使用缓存。

export async function getServerSideProps(context) {
   const res = await getRequest(API.home)
   return {
     props: {
       "home": res?.data?.result
     },
   }
}

Next.js 版本为 11.1。

有人可以建议我们如何实现缓存吗？

Answer 1

您可以使用 res.setHeader 在 getServerSideProps 中设置 Cache-Control header 。

export async function getServerSideProps(context) {
    // Add whatever `Cache-Control` value you want here
    context.res.setHeader(
        'Cache-Control',
        'public, s-maxage=10, stale-while-revalidate=59'
    )
    const res = await getRequest(API.home)
    return {
        props: {
            home: res?.data?.result
        }
    }
}

设置 Cache-Control 值仅适用于生产模式，因为 header 将在开发模式下被覆盖。

见 Caching with Server-Side Rendering文档以获取更多详细信息。