内容不更新，直到重新部署到Next.js

Question

在使用getServerSideProps的Next.js version 12应用程序中，我有一个问题，从我的生产CMS获取内容到我的生产博客。

当我从CMS添加条目到本地应用程序时，它会在我的本地应用程序上更新。它不会更新我的生产站点，除非我将我的站点重新部署到生产站点。
我正在寻找一个解决方案，并考虑这些选项:

• 我应该尝试cache dynamic responses像在文件吗?

res.setHeader(
'Cache-Control',
'public, s-maxage=10, stale-while-revalidate=59'
)

• 我应该切换到getstaticprops，我可以使用revalidate属性?
• 我应该使用第三方库来解决问题吗?
这篇文章可能和我的问题有关吗?

下面是通过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

任何帮助都将不胜感激

Answer 1

如果你正在使用CMS来获取数据，使用getStaticProps和revalidate将是一个更好的方法来提高性能，并保持你的网站更新最新的数据。

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环境下，网站每20s获取一次数据。