Next.js 静态页面数据获取与更新 | 如何在生成静态页面后显示动态数据

Next.js 静态页面数据获取与更新：解决生成静态页面后数据显示为 0 的问题

在 Next.js 中，当使用 npm run build 生成静态页面时，可能会遇到一个常见问题：在开发环境 (npm run dev) 中可以正常显示动态数据，但生成静态页面后数据却显示为 0。这是因为在生成静态页面时，服务器端渲染无法访问到 API 接口，导致无法获取到数据。

本文将介绍如何解决这个问题，并在静态页面中正确显示动态数据。

问题分析

代码示例：

import { useEffect, useState } from 'react';
import { SiteRuntime } from './SiteRuntime';

export default function InfoTotal() {
  const [totalPosts, setTotalPosts] = useState<number>(0);
  const [numSorts, setNumSorts] = useState<number>(0);

  useEffect(() => {
    async function fetchTotal() {
      const res = await fetch('/api/total');
      const { totalPosts, numSorts } = await res.json();
      setTotalPosts(totalPosts);
      setNumSorts(numSorts);
    }
    fetchTotal();
  }, []);

  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>
  );
}

在上面的代码中，InfoTotal 组件使用 useEffect 钩子来从 /api/total 接口获取数据，并使用 useState 钩子来存储数据。在开发环境中，该代码可以正常运行，但生成静态页面后，numSorts 和 totalPosts 却显示为 0。

这是因为在生成静态页面时，服务器端渲染无法访问到 /api/total 接口，导致无法获取到数据，从而导致 numSorts 和 totalPosts 都为 0。

解决方法：使用 getStaticProps 和 revalidate 属性

为了在静态页面中正确显示动态数据，我们需要使用 getStaticProps 方法来获取数据，并使用 revalidate 属性来定期重新生成静态页并更新数据。

// pages/index.js
import { useEffect, useState } from 'react';
import { SiteRuntime } from './SiteRuntime';

export default function InfoTotal({ totalPosts, numSorts }) {
  const [localTotalPosts, setLocalTotalPosts] = useState<number>(totalPosts);
  const [localNumSorts, setLocalNumSorts] = useState<number>(numSorts);

  useEffect(() => {
    async function fetchTotal() {
      const res = await fetch('/api/total');
      const { totalPosts, numSorts } = await res.json();
      setLocalTotalPosts(totalPosts);
      setLocalNumSorts(numSorts);
    }
    fetchTotal();
  }, []);

  return (
    <section className='info'>
      <div className='info-fanma'>
        <h2>导航信息</h2>
        <ul>
          <li><span className='l'>网站目录：</span><span className='r'>{localNumSorts}</span></li>
          <li><span className='l'>收录网站：</span><span className='r'>{localTotalPosts}</span></li>
          <SiteRuntime />
        </ul>
      </div>
    </section>
  );
}

export async function getStaticProps() {
  const res = await fetch('/api/total');
  const { totalPosts, numSorts } = await res.json();
  return {
    props: {
      totalPosts,
      numSorts,
    },
    revalidate: 60, // 每 60 秒重新生成静态页并更新数据
  };
}

在上面的代码中：

• getStaticProps 方法在构建时运行，并从 /api/total 接口获取数据。
• props 属性将获取到的数据传递给 InfoTotal 组件。
• revalidate 属性设置为 60 秒，表示每 60 秒重新生成静态页并更新数据。

运行命令

使用以下命令生成静态页面：

npm run build && next export

总结

通过使用 getStaticProps 方法和 revalidate 属性，我们可以确保在生成静态页面后，仍然可以获取到最新数据，并定期更新静态页面内容。这样就能保证在静态页面中正确显示动态信息。

希望本文能够帮助您解决在 Next.js 中生成静态页面后数据显示为 0 的问题。