getStaticProps 细节

这里有一些关于 getStaticProps 的重要信息，你应该了解。

获取外部 API 或查询数据库

在 lib/posts.js 中，我们实现了 getSortedPostsData，它从文件系统获取数据。但是你可以从其他来源获取数据，例如外部 API 端点，它也能正常工作。

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..');
  return res.json();
}

注意：Next.js 在客户端和服务器端都为 fetch() 提供了 polyfill。你不需要导入它。

你也可以直接查询数据库

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

这是可能的，因为 getStaticProps 仅在 **服务器端** 运行。它永远不会在客户端运行。它甚至不会包含在浏览器的 JS 包中。这意味着你可以编写诸如直接数据库查询之类的代码，而无需将其发送到浏览器。

开发环境与生产环境

• 在 **开发环境**（npm run dev 或 yarn dev）中，getStaticProps 在 **每次请求** 时都会运行。
• 在 **生产环境** 中，getStaticProps 在 **构建时** 运行。但是，这种行为可以通过使用 fallback 键（由 getStaticPaths 返回）来增强。

因为它旨在在构建时运行，所以你将无法使用仅在请求时可用的数据，例如查询参数或 HTTP 标头。

仅允许在页面中使用

getStaticProps 只能从 **页面** 中导出。你不能从非页面文件中导出它。

此限制的原因之一是 React 需要在页面渲染之前拥有所有必需的数据。

如果我需要在请求时获取数据怎么办？

由于 静态生成 在构建时只发生一次，因此它不适合频繁更新或在每次用户请求时发生变化的数据。

在这种情况下，如果你的数据可能会发生变化，你可以使用 **服务器端渲染**。让我们在下一节中详细了解服务器端渲染。