Next.js 缓存控制：使用 revalidate 属性优化页面性能

在 Next.js 中，你可以通过设置 getServerSideProps 或 getStaticProps 的 revalidate 属性来控制缓存内容，从而优化页面性能和用户体验。这两个方法分别用于服务器端渲染和静态生成。

• 对于动态页面，使用 getServerSideProps 方法获取数据。默认情况下，每次请求都会重新获取数据，但可以通过设置 revalidate 属性来开启缓存。例如，revalidate: 60 表示在 60 秒内不会重新获取数据，而是使用缓存数据。

export async function getServerSideProps(context) {
  // 获取数据的逻辑
  const data = await fetchData();

  return {
    props: {
      data,
    },
    revalidate: 60,
  };
}

• 对于静态页面，使用 getStaticProps 方法获取数据。默认情况下，数据只会在构建时获取一次。通过设置 revalidate 属性，可以开启缓存，例如 revalidate: 60 表示在 60 秒内不会重新构建页面，而是使用缓存的页面。

export async function getStaticProps() {
  // 获取数据的逻辑
  const data = await fetchData();

  return {
    props: {
      data,
    },
    revalidate: 60,
  };
}

请注意，revalidate 属性只在生产环境中生效。在开发环境中，每次请求都会重新获取数据。