Next.js SSG支持动态数据吗？

Next.js 是一个流行的开源 React 框架，用于构建服务器渲染（SSR）和静态站点生成（SSG）的 Web 应用程序。SSG 是一种在构建时生成静态 HTML 文件的技术，这些文件可以直接从服务器提供给客户端，无需任何服务器端的 JavaScript 执行。

Next.js SSG 支持动态数据吗？

是的，Next.js 的 SSG 模式支持在构建时获取动态数据。这意味着你可以在构建过程中执行 API 请求或其他数据获取操作，并将结果嵌入到生成的静态页面中。这种方式可以提高页面加载速度，因为所有必要的数据都在构建时就已经准备好了。

如何在 Next.js SSG 中使用动态数据？

你可以使用 getStaticProps 或 getStaticPaths 函数来在构建时获取动态数据。

`getStaticProps`

getStaticProps 是一个在构建时运行的函数，它返回一个对象，该对象包含要传递给页面组件的 props。这个函数可以用来获取 API 数据或其他外部数据源的数据。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

`getStaticPaths`

getStaticPaths 是一个可选的函数，用于定义哪些页面应该被预渲染。它返回一个包含路径的对象数组。

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/items');
  const items = await res.json();

  const paths = items.map((item) => ({
    params: { id: item.id.toString() },
  }));

  return { paths, fallback: false };
}

应用场景

SSG 支持动态数据的特性非常适合以下场景：

博客和新闻网站：可以在构建时获取最新的文章数据，并生成静态页面。
产品目录：可以在构建时获取产品数据，并生成每个产品的静态页面。
SEO 优化：由于页面在构建时已经包含了所有必要的数据，搜索引擎可以更容易地索引这些页面。

遇到的问题及解决方法

问题：API 请求失败导致构建失败

原因：在构建过程中，如果 API 请求失败，可能会导致构建失败。

解决方法：

错误处理：在 getStaticProps 中添加错误处理逻辑，确保即使 API 请求失败，构建过程也不会中断。

export async function getStaticProps() {
  try {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();

    return {
      props: {
        data,
      },
    };
  } catch (error) {
    console.error('Error fetching data:', error);
    return {
      props: {
        data: [],
      },
    };
  }
}

备用数据：在 API 请求失败时，可以使用备用数据来继续构建过程。

export async function getStaticProps() {
  let data;
  try {
    const res = await fetch('https://api.example.com/data');
    data = await res.json();
  } catch (error) {
    console.error('Error fetching data:', error);
    data = require('./fallback-data.json'); // 使用备用数据
  }

  return {
    props: {
      data,
    },
  };
}