面试题：Next.js 中 getStaticProps 的数据获取时机及适用场景

Question

请阐述 Next.js 里 getStaticProps 是在什么时候获取数据的，并且说明在哪些业务场景下使用 getStaticProps 进行数据获取是比较合适的，举例说明。

Answer 1

getStaticProps 获取数据的时机

在构建时（build time）获取数据。Next.js 会在构建阶段调用 getStaticProps 函数，将获取到的数据与页面组件一起生成静态 HTML 文件。这样，当用户请求页面时，服务器可以直接返回预先生成的 HTML，提高页面加载速度。

适合使用 getStaticProps 的业务场景

1. 内容驱动的页面：例如博客文章页面、产品介绍页面等，这些页面的数据相对稳定，更新频率较低。因为在构建时获取数据生成静态页面，在数据不频繁变动的情况下能有效提升性能。
   • 举例：一个个人技术博客网站，每篇博客文章内容很少修改。可以在 getStaticProps 中从 CMS（如 WordPress 等）获取文章数据，在构建阶段生成静态页面。用户访问博客文章页面时，直接获取静态 HTML，无需每次都向 CMS 发起请求。
2. 营销页面：像公司官网的首页、活动页面等，这些页面的内容在活动期间或一段时间内不会经常变化。通过 getStaticProps 在构建时获取数据并生成静态页面，可以快速响应用户请求。
   • 举例：一家电商公司举办限时促销活动，活动页面展示的商品信息、活动规则等在活动期间基本不变。在活动开始前构建页面时，使用 getStaticProps 从数据库获取活动相关数据并生成静态页面，活动期间用户访问活动页面就能快速加载。