面试题：Next.js 中 getStaticProps 的执行时机及作用

getStaticProps 函数执行时机

在 Next.js 项目中，getStaticProps 函数在构建时（build time）执行。这意味着 Next.js 会在构建阶段运行这个函数，而不是在每次请求页面时运行。这样可以提前生成 HTML 页面，从而大大提高页面的加载速度。

在数据获取方面的作用

预渲染数据：getStaticProps 允许你在构建时获取数据，并将这些数据作为 props 传递给页面组件。这使得页面在构建时就已经包含了所需的数据，而不需要在客户端进行额外的数据请求。
SEO 友好：由于数据是在构建时获取并嵌入到 HTML 中的，搜索引擎爬虫可以直接访问这些数据，提高页面的 SEO 性能。
性能优化：减少了客户端的数据获取时间，特别是对于数据变化不频繁的页面，极大地提升了用户体验。

适合使用 getStaticProps 获取数据的场景

博客文章：博客文章通常不会频繁更新，使用 getStaticProps 可以在构建时获取文章数据，并生成静态 HTML 页面。这样每次用户访问博客文章时，都可以快速加载页面，而不需要等待数据从服务器获取。
产品介绍页面：产品介绍页面的数据一般也不会经常变动，通过 getStaticProps 在构建时获取产品信息并生成静态页面，能提高页面加载速度，为用户提供更好的体验。
营销页面：如公司的首页、活动页面等，这些页面的数据更新频率较低，使用 getStaticProps 可以在构建时获取相关数据并预渲染页面，提升页面性能和 SEO。

示例代码如下：

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

  return {
    props: {
      data
    },
    revalidate: 60 * 60 * 24 // 每24小时重新验证一次数据（可选）
  }
}

const MyPage = ({ data }) => {
  return (
    <div>
      {/* 使用从 getStaticProps 获取的数据 */}
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  )
}

export default MyPage

在上述示例中，getStaticProps 函数在构建时通过 fetch 获取数据，并将数据作为 props 传递给 MyPage 组件。如果设置了 revalidate 选项，在页面部署后，Next.js 会在指定的时间间隔内重新验证数据，并在有新数据时重新生成页面。

星途面试题库

面试题：Next.js 中 getStaticProps 的执行时机及作用

知识考点

面试题答案

getStaticProps 函数执行时机

在数据获取方面的作用

适合使用 getStaticProps 获取数据的场景