内容在Next.js重新部署之前不会更新。

huangapple go评论80阅读模式
英文:

Content is not updating until re-deploy in Next.js

问题

Next.js 12版本中,使用getServerSideProps时,我在将内容从生产CMS获取到生产博客上遇到了问题。

当我从CMS添加条目到本地应用时,它会在本地应用上更新。但它不会在生产站点上更新,除非我重新部署我的站点。
我正在寻找解决方法,考虑以下选项:

  • 我是否应该尝试像文档中那样缓存动态响应
  1. res.setHeader(
  2. 'Cache-Control',
  3. 'public, s-maxage=10, stale-while-revalidate=59'
  4. )
  • 我是否应该切换到getStaticProps,其中我可以使用revalidate属性?
  • 我是否应该使用第三方库来解决这个问题?
  • 这篇文章是否可能与我的问题相关?

以下是通过getServerSideProps获取数据的代码片段:

  1. async function getAllArticles() {
  2. const { data } = await apolloClient.query({
  3. query: gql`
  4. query getAllArticles {
  5. name
  6. }
  7. `,
  8. });
  9. return data;
  10. }
  11. export async function getServerSideProps() {
  12. const allArticles = await getAllArticles();
  13. return {
  14. props: {
  15. allArticles
  16. },
  17. };
  18. }
  19. const Articles: NextPage = ({allArticles}) => {
  20. ... // 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?
  1. res.setHeader(
  2. &#39;Cache-Control&#39;,
  3. &#39;public, s-maxage=10, stale-while-revalidate=59&#39;
  4. )
  • should I switch to getstaticprops where I can use revalidate property?
  • 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:

  1. async function getAllArticles() {
  2. const { data } = await apolloClient.query({
  3. query: gql`
  4. query getAllArticles {
  5. name
  6. }
  7. `,
  8. });
  9. return data;
  10. }
  11. export async function getServerSideProps() {
  12. const allArticles = await getAllArticles();
  13. return {
  14. props: {
  15. allArticles
  16. },
  17. };
  18. }
  19. const Articles: NextPage = ({allArticles}) =&gt; {
  20. ... // allArticles don&#39;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.

  1. export const getStaticProps = async () => {
  2. const res = await axios.get("/api/...");
  3. const data = res?.data;
  4. return {
  5. props: {
  6. data,
  7. },
  8. revalidate: 20,
  9. }
  10. };
  11. function Component({ data }) {
  12. // render your component with the fetched data
  13. }

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 -->

  1. export const getStaticProps = async () =&gt; {
  2. const res = await axios.get(&quot;/api/...&quot;);
  3. const data = res?.data;
  4. return {
  5. props: {
  6. data,
  7. },
  8. revalidate: 20,
  9. }
  10. };
  11. function Component({ data }) {
  12. // render your component with the fetched data
  13. }

<!-- end snippet -->

In dev environment the website will fetch data instantly.

In prod environment the website will fetch data each 20s.

huangapple
  • 本文由 发表于 2023年3月31日 16:55:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75896613.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定