getStaticProps 详解

以下是关于 getStaticProps 的一些关键信息。

获取外部 API 或查询数据库

在 lib/posts.js 中，我们实现了从文件系统获取数据的 getSortedPostsData 方法。但你也可以从其他数据源（如外部 API 端点）获取数据：

export async function getSortedPostsData() {
  // 替代文件系统
  // 从外部 API 端点获取文章数据
  const res = await fetch('..');
  return res.json();
}

注意：Next.js 在客户端和服务端都实现了 fetch() 的 polyfill，无需手动导入。

你也可以直接查询数据库：

import someDatabaseSDK from 'someDatabaseSDK'
 
const databaseClient = someDatabaseSDK.createClient(...)
 
export async function getSortedPostsData() {
  // 替代文件系统
  // 从数据库查询文章数据
  return databaseClient.query('SELECT posts...')
}

这是因为 getStaticProps 仅在服务端运行，永远不会在客户端执行，甚至不会包含在浏览器端的 JS 打包文件中。因此你可以安全地编写直接查询数据库的代码而无需担心泄露到浏览器。

开发环境与生产环境

• 在开发环境（npm run dev 或 yarn dev）下，getStaticProps 会在_每次请求_时执行
• 在生产环境下，getStaticProps 会在_构建时_执行（可通过 getStaticPaths 返回的 fallback 参数增强此行为）

由于该方法设计为在构建时运行，因此无法使用仅在请求时有效的数据（如查询参数或 HTTP 头部）。

仅限页面组件使用

getStaticProps 只能从页面组件中导出，不能用于非页面文件。

这个限制的原因之一是 React 需要在页面渲染前获取所有必需的数据。

如果需要实时获取数据怎么办？

由于静态生成 (Static Generation) 只在构建时执行一次，不适合频繁更新或随用户请求变化的数据。

对于这类动态数据场景，可以使用服务端渲染 (Server-side Rendering)。我们将在下一节详细介绍服务端渲染。