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 包中。这意味着您可以编写诸如直接数据库查询之类的代码，而无需将其发送到浏览器。

开发环境 vs. 生产环境

• 在开发环境（npm run dev 或 yarn dev）中，getStaticProps 在 每次请求 时运行。
• 在生产环境中，getStaticProps 在 构建时 运行。但是，此行为可以使用 getStaticPaths 返回的 fallback 键 进行增强。

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

仅允许在页面中

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

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

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

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

在这种情况下，当您的数据可能发生变化时，您可以使用 服务器端渲染。让我们在下一节中了解更多关于服务器端渲染的信息。