Next.js动态路由中getStaticProps显示旧数据问题求助

我基于React.js使用Next.js开发项目，创建了slug.js文件实现动态路由，但通过axios从数据库获取数据时，页面始终显示旧数据而非当前数据，控制台打印的也是旧数据，不清楚问题出在哪里，以下是我的代码：

const Post = function ({post}) {
  useEffect(() => {
    // showing old record/title instead of current
    console.log(`Found Post title : ${post.title}`);
  }, []);
};

export const getStaticProps = async ({ params }) => {
  const { data } = await axios.get(
    `https://diggdevelopment.com/blackstallion_new/api/getblogbyuserid/${params.slug}`
  );
  const post = data;

  console.log('dat is' + post);

  return {
    props: {
      post,
    },
  };
};

export const getStaticPaths = async () => {
  const { data } = await axios.get(
    'http://diggdevelopment.com/blackstallion_new/api/blogscopy'
  );
  const posts = data.slice(0, 10);
  const paths = posts.map((post) => ({ params: { slug: post.id.toString() } }));
  return {
    paths,
    fallback: true,
  };
};

问题原因与解决办法 #

• 静态生成的缓存机制：getStaticProps默认在构建阶段生成静态页面，之后不会主动拉取新数据，页面会一直展示构建时的旧数据。
• 开启增量静态再生：在getStaticProps的返回值里添加revalidate字段，设置刷新间隔（单位：秒）。Next.js会在这个时间内自动重新生成页面，获取最新数据。修改后的代码如下：

export const getStaticProps = async ({ params }) => {
  const { data } = await axios.get(
    `https://diggdevelopment.com/blackstallion_new/api/getblogbyuserid/${params.slug}`
  );
  const post = data;

  console.log('dat is' + post);

  return {
    props: {
      post,
    },
    // 每60秒重新生成页面，可根据需求调整时间
    revalidate: 60
  };
};

• 修正useEffect依赖：你的useEffect依赖数组为空，只会在组件首次挂载时打印数据。把post加入依赖数组后，每次post更新都会触发打印，方便你查看最新数据：

useEffect(() => {
  console.log(`Found Post title : ${post.title}`);
}, [post]);

• fallback模式的补充说明：你设置了fallback: true，未预生成的路径会在客户端动态生成静态页面，但同样需要revalidate来保证后续数据更新时页面能同步刷新。

内容的提问来源于stack exchange，提问作者prabhat mohal