如何仅在NextJS站点构建期间使用getInitialProps？

在Next.js中，getInitialProps 是用来异步获取数据的一个方法，它可以在服务器端或客户端运行，具体取决于页面是如何被加载和访问的。如果你想要仅在构建期间使用 getInitialProps，即只在服务器端生成静态页面时获取数据，而不在客户端运行，可以采用以下策略：

1. 使用 getStaticProps 代替 getInitialProps

从 Next.js 9.3 版本开始，推荐使用 getStaticProps 来代替 getInitialProps，因为 getStaticProps 只会在构建时运行，绝不会在客户端运行。这符合你的需求。

示例：

jsx
export async function getStaticProps() {
  // 假设我们从某个API获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 将会被传递到页面组件作为props
  };
}

function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to Our Site!</h1>
      <p>Data: {JSON.stringify(data)}</p>
    </div>
  );
}

export default HomePage;

在这个例子中，数据仅在构建时从 API 获取，并作为 props 传递给页面组件。客户端不会重新获取数据。

2. 明确场景和需求

虽然通常不建议将 getInitialProps 仅用于构建期间，如果确实有特殊需求，你可以在 getInitialProps 中添加环境判断逻辑，仅在服务器端获取数据。

示例：

jsx
Page.getInitialProps = async (ctx) => {
  if (!ctx.req) {
    // 客户端环境，不执行任何操作
    return {};
  }

  // 服务器端环境，从API获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return { data };
};

在这个例子中，getInitialProps 通过判断 ctx.req（只有服务器端渲染时才会有 req 对象）来确保仅在服务器端运行数据获取逻辑。这样客户端就不会重新执行数据获取。

结论

建议根据项目需求使用 getStaticProps。这不仅满足了构建时获取数据的需求，还能保证页面的性能和优化。如果有特定情况必须使用 getInitialProps，则应加入适当的环境判断逻辑以确保其只在服务器端执行。