Next.js 的 getStaticProps 和 getInitialProps 的区别是什么？

推荐答案

getStaticProps 和 getInitialProps 是 Next.js 中用于数据获取的两个重要方法，但它们的使用场景和行为有所不同。

• getStaticProps: 用于在构建时生成静态页面。它只在构建时运行一次，生成静态 HTML 文件。适用于内容不频繁变化的页面，如博客文章、产品列表等。

• getInitialProps: 用于在页面加载时获取数据。它在每次页面请求时运行，适用于需要动态数据的页面，如用户个人资料、实时数据展示等。

本题详细解读

getStaticProps

getStaticProps 是一个异步函数，用于在构建时获取数据并生成静态页面。它的主要特点包括：

• 构建时运行：getStaticProps 只在构建时运行一次，生成静态 HTML 文件。这意味着页面内容在构建后不会改变，除非重新构建。

• 静态生成：适用于内容不频繁变化的页面，如博客文章、产品列表等。由于页面是静态生成的，访问速度非常快。

• 不支持动态数据：由于 getStaticProps 只在构建时运行，因此无法获取动态数据。如果页面内容需要频繁更新，getStaticProps 可能不是最佳选择。

• 示例代码：

  // www.javascriptcn.com code example
  export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
  
    return {
      props: {
        data,
      },
    };
  }

getInitialProps

getInitialProps 是一个异步函数，用于在页面加载时获取数据。它的主要特点包括：

• 每次请求时运行：getInitialProps 在每次页面请求时运行，适用于需要动态数据的页面，如用户个人资料、实时数据展示等。

• 动态数据获取：由于 getInitialProps 在每次请求时运行，因此可以获取最新的动态数据。这使得它非常适合需要实时更新的页面。

• 性能影响：由于 getInitialProps 在每次请求时运行，可能会对页面加载性能产生一定影响，特别是在数据获取较慢的情况下。

• 示例代码：

  // www.javascriptcn.com code example
  function Page({ data }) {
    return <div>{data}</div>;
  }
  
  Page.getInitialProps = async (ctx) => {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
  
    return { data };
  };
  
  export default Page;

总结

• getStaticProps：适用于内容不频繁变化的页面，生成静态 HTML 文件，访问速度快。
• getInitialProps：适用于需要动态数据的页面，每次请求时获取最新数据，适合实时更新场景。