React 静态网站生成后数据显示为 0 的问题解决方案

在使用 npm run build 生成静态页时，React 组件会被编译成静态 HTML，由于静态页不会执行 JavaScript，所以 useEffect 不会触发，导致数据没有被正确加载。

为了解决这个问题，可以将数据请求的代码移到一个单独的函数中，并在组件渲染时调用该函数，将获取到的数据作为 props 传递给组件。这样即使在静态页中，也可以正确显示数据。

修改 /components/InfoTotal.tsx 的代码：

import { SiteRuntime } from './SiteRuntime';

interface Props {
  totalPosts: number;
  numSorts: number;
}

export default function InfoTotal({ totalPosts, numSorts }: Props) {
  return (
    <section className='info'>
      <div className='info-fanma'>
        <h2>导航信息</h2>
        <ul>
          <li>
            <span className='l'>网站目录：</span>
            <span className='r'>{numSorts}</span>
          </li>
          <li>
            <span className='l'>收录网站：</span>
            <span className='r'>{totalPosts}</span>
          </li>
          <SiteRuntime />
        </ul>
      </div>
    </section>
  );
}

export async function getInfoTotalProps() {
  const res = await fetch('/api/total');
  const { totalPosts, numSorts } = await res.json();
  return {
    props: {
      totalPosts,
      numSorts,
    },
  };
}

在页面中使用 getInfoTotalProps 函数获取数据：

import { getInfoTotalProps } from '../components/InfoTotal';

export default function Home({ totalPosts, numSorts }) {
  return (
    <>
      <Head>
        <title>My Blog</title>
      </Head>
      <InfoTotal totalPosts={totalPosts} numSorts={numSorts} />
    </>
  );
}

export async function getStaticProps() {
  const infoTotalProps = await getInfoTotalProps();
  return {
    props: {
      ...infoTotalProps.props,
    },
  };
}

在这里，我们使用 getStaticProps 函数获取数据并将其作为 props 传递给页面组件。getStaticProps 函数只会在构建时执行一次，将数据预先加载到静态页面中，这样静态页就可以正确显示数据了。