Next.js version 12个应用程序使用getServerSideProps,我有一个问题,从我的生产CMS到我的生产博客上的内容.

当我从CMS向本地应用程序添加条目时,它会在我的本地应用程序上更新. 除非我在生产时重新部署我的站点,否则它不会更新我的生产站点.
我正在寻找一种解决办法,并考虑这些选项:

  • 我应该试着像doctor 一样做到cache dynamic responses吗?
 res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )
  • 我应该换到getstaticprops,在那里我可以使用revalidate房产吗?
  • 我应该使用第三方库来解决这个问题吗?
  • this article会和我的问题有关吗?

以下是通过getServerSideProps读取的代码片段:

 async function getAllArticles() {
   const { data } = await apolloClient.query({
    query: gql`
      query getAllArticles {
        name
      }
    `,
  });
  return data;
}
export async function getServerSideProps() {
  const allArticles = await getAllArticles();

  return {
    props: {
      allArticles
    },
  };
}

const Articles: NextPage = ({allArticles}) => {
... // allArticles don't update until redeploy

如有任何帮助,将不胜感激

推荐答案

如果您使用CMS来获取数据,则使用getStaticPropsrevalidate将是更好的性能和使您的网站保持最新数据的方法.

export const getStaticProps = async () => {
    const res = await axios.get("/api/...");
    const data = res?.data;
    
    return {
      props: {
        data,
      },
      revalidate: 20,
    }
};


function Component({ data }) {
  // render your component with the fetched data
}

dev环境下,网站将即时获取数据.

prod环境下,网站将每20秒获取一次数据.

Javascript相关问答推荐

如何在react js中显示文本字段或2个不同的组件?

二维数组,过滤并返回带有索引而不是值的新数组

在JavaScript中逐一播放随机生成的音频文件数组

如何最好地从TypScript中的enum获取值

传递一个大对象以在Express布局中呈现

扫描qr code后出错whatter—web.js

如何调用名称在字符串中的实例方法?

JSDoc创建并从另一个文件导入类型

如何将react—flanet map添加到remixjs应用程序

查询参数未在我的Next.js应用路由接口中定义

在数组中查找重叠对象并仅返回那些重叠对象

JavaScript是否有多个`unfined`?

未加载css colored颜色 ,无法将div设置为可见和不可见

为什么云存储中的文件不能公开使用?

postman 预请求中的hmac/sha256内标识-从js示例转换

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作,但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

react 路由如何使用从加载器返回的数据

为什么我不能使用其同级元素调用和更新子元素?

ReferenceError:无法在初始化之前访问setData

如何使用Reaction路由导航测试挂钩?