NextJS：getStaticProps 重新验证不起作用

JS

Next.JS 是一个流行的 React 框架，用于构建现代化的、高性能的 Web 应用程序。它提供了一种名为 getStaticProps 的函数，该函数用于在构建时从外部数据源获取数据，并将其作为静态数据传递给页面组件。然而，最近一些开发者遇到了一个问题，即在某些情况下，getStaticProps 函数似乎不起作用。

这个问题导致一些页面在构建时无法获取到最新的数据，而仍然使用旧的数据。这对于需要频繁更新的页面来说是一个严重的问题，因为它们无法及时反映出最新的内容。开发者们尝试了各种方法来解决这个问题，但并没有找到一个完美的解决方案。

为了更好地理解这个问题，我们可以看一个具体的案例。假设我们正在构建一个博客应用程序，我们希望在首页上显示最新的文章列表。我们可以使用 getStaticProps 函数来获取文章数据，并将其传递给首页组件。

Javascript
// pages/index.JS
import React from 'react';
const Home = ({ articles }) => {
  return (
    <div>
      <h1>最新文章</h1>
      <ul>
        {articles.map((article) => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
};
export async function getStaticProps() {
  // 从外部数据源获取最新的文章数据
  const res = awAIt fetch('https://api.example.com/articles');
  const articles = awAIt res.JSon();
  return {
    props: {
      articles,
    },
  };
}
export default Home;

在上面的代码中，我们使用 fetch 函数从外部数据源获取最新的文章数据，并将其传递给首页组件。然而，这个示例可能会遇到我们前面提到的问题，即 getStaticProps 函数在构建时不起作用。

为了解决这个问题，我们可以尝试一些解决方案。首先，我们可以尝试使用 getServerSideProps 函数代替 getStaticProps 函数。getServerSideProps 函数在每个请求时都会被调用，这样可以确保我们始终获取到最新的数据。然而，这种方式可能会牺牲一些性能，因为每个请求都需要从外部数据源获取数据。

另一种解决方案是结合使用 getStaticProps 和 getStaticPaths 函数。getStaticPaths 函数用于生成页面的路径参数，而 getStaticProps 函数用于获取对应路径的数据。通过这种方式，我们可以在构建时生成多个页面，并为每个页面提供不同的数据。这样，我们就可以在每个页面上显示不同的内容，而不仅仅是首页。

Javascript
// pages/[id].JS
import React from 'react';
const Article = ({ article }) => {
  return (
    <div>
      <h1>{article.title}</h1>
      
{article.content}
    </div>
  );
};
export async function getStaticPaths() {
  // 从外部数据源获取所有文章的 ID
  const res = awAIt fetch('https://api.example.com/articles');
  const articles = awAIt res.JSon();
  // 生成所有文章的路径参数
  const paths = articles.map((article) => ({
    params: { id: article.id.toString() },
  }));
  return {
    paths,
    fallback: false,
  };
}
export async function getStaticProps({ params }) {
  // 根据路径参数获取对应的文章数据
  const res = awAIt fetch(<code>https://api.example.com/articles/${params.id}</code>);
  const article = awAIt res.JSon();
  return {
    props: {
      article,
    },
  };
}
export default Article;

在上面的代码中，我们使用动态路由来生成多个文章页面。每个页面根据路径参数获取对应的文章数据，并将其传递给文章组件。通过这种方式，我们可以为每个页面提供不同的数据，以确保内容始终是最新的。

对于某些开发者来说，Next.JS 的 getStaticProps 函数在构建时不起作用可能是一个令人困惑的问题。然而，通过尝试不同的解决方案，我们可以找到一种适合我们应用程序的方法，以确保我们始终获取到最新的数据。无论是使用 getServerSideProps 函数还是结合使用 getStaticPaths 和 getStaticProps 函数，我们都可以在 Next.JS 中构建出高性能、实时更新的 Web 应用程序。