英文:
Content is not updating until re-deploy in Next.js
问题
在Next.js 12版本中，使用getServerSideProps时，我在将内容从生产CMS获取到生产博客上遇到了问题。
当我从CMS添加条目到本地应用时，它会在本地应用上更新。但它不会在生产站点上更新，除非我重新部署我的站点。
我正在寻找解决方法，考虑以下选项：
- 我是否应该尝试像文档中那样
缓存动态响应？
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在重新部署之前不会更新
任何帮助将不胜感激。
英文:
In Next.js version 12 app using getServerSideProps I am having an issue getting content from my production CMS onto my production blog.
When I add entries to local app from CMS, it updates on my local app.
It doesn't update my production site unless I redeploy my site on production.<br>
I'm looking for a workaround and think about those options:
- Should I try to
cache dynamic responseslike in docs?
res.setHeader(
'Cache-Control',
'public, s-maxage=10, stale-while-revalidate=59'
)
- should I switch to
getstaticpropswhere I can userevalidateproperty? - should I use 3rd party library to fix the issue?
- Could this article be related to my Problem?
Here is a snippet of the code fetching via 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
Any help will be appreciated
答案1
得分: 1
If you are using a CMS for getting data, using getStaticProps with revalidate will be a better approach for performance and keeping your website updated with the latest data.
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
}
In the dev environment, the website will fetch data instantly.
In the prod environment, the website will fetch data every 20 seconds.
英文:
If you are using a CMS for getting data, using getStaticProps with revalidate will be a better approach for performance and keeping your website updated with latest data.
<!-- language: lang-js -->
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
}
<!-- end snippet -->
In dev environment the website will fetch data instantly.
In prod environment the website will fetch data each 20s.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论