数据静态化

在 Next.js 中，数据静态化通常指的是预先获取数据并在构建时生成静态页面的过程。这可以通过 getStaticProps 和 getStaticPaths 函数实现，这两个函数允许你在构建时从外部数据源（如数据库、CMS 或者 API）获取数据，并基于这些数据生成静态 HTML 文件。这对于内容驱动型网站（如博客、电子商务产品页等）尤其有用，因为它可以显著提高性能和 SEO 效果。

使用 getStaticProps 和 getStaticPaths

1. getStaticProps

getStaticProps 函数用于在构建时预取数据，并将这些数据作为 props 传递给页面组件。它只在服务器端运行，在每次构建时执行一次。

示例

假设你有一个博客应用，并希望在构建时预取文章列表：

// pages/posts/[id].js
export async function getStaticProps({ params }) {
  // 假设 fetchPostById 是一个异步函数，用来根据 id 获取文章详情
  const post = await fetchPostById(params.id);

  return {
    props: {
      post,
    },
  };
}

function Post({ post }) {
  return <div>{post.title}</div>;
}

export default Post;

2. getStaticPaths

当你需要为动态路由生成多个静态页面时，使用 getStaticPaths 来定义哪些路径应该被预渲染。

示例

继续上面的例子，如果你希望为每篇文章都生成一个静态页面，你可以使用 getStaticPaths：

// pages/posts/[id].js
export async function getStaticPaths() {
  // 假设 fetchAllPostsIds 是一个异步函数，返回所有文章的 ID 列表
  const posts = await fetchAllPostsIds();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() }, // 必须匹配动态参数的格式
  }));

  return { paths, fallback: false }; // 如果未预渲染的路径被访问，则返回404页面
}

export async function getStaticProps({ params }) {
  const post = await fetchPostById(params.id);
  return {
    props: {
      post,
    },
  };
}

function Post({ post }) {
  return <div>{post.title}</div>;
}

export default Post;

在这个例子中，getStaticPaths 定义了哪些文章页面应该被预渲染。当运行 npm run build 时，Next.js 将为每个文章 ID 预渲染一个页面。

增量静态再生成 (ISR)

有时，你可能不希望在构建时就确定所有要生成的页面，或者你的内容更新频繁。在这种情况下，可以使用增量静态再生成（Incremental Static Regeneration, ISR）。通过设置 fallback: true，可以让 Next.js 在初次请求时生成页面，并在后台重新生成该页面（如果设置了 revalidate 时间）。

示例

export async function getStaticPaths() {
  return {
    paths: [], // 开始时不预渲染任何页面
    fallback: "blocking", // 或者使用 'true' 实现非阻塞式加载
  };
}

export async function getStaticProps({ params }) {
  const post = await fetchPostById(params.id);
  return {
    props: {
      post,
    },
    revalidate: 60, // 每隔60秒尝试重新验证并更新页面
  };
}

这种方式特别适合那些内容经常变化的页面，比如新闻网站或电商平台的产品页面。

总结

通过 getStaticProps 和 getStaticPaths，你可以轻松地将动态数据集成到静态生成的工作流中，从而实现数据静态化。结合增量静态再生成功能，还可以进一步优化用户体验和内容更新频率。这种方法不仅提高了页面加载速度和 SEO 表现，还简化了开发流程，使得管理和扩展大型站点变得更加容易。