跳到内容

26

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 在客户端和服务器端都 polyfill 了 fetch() 。你不需要导入它。

你也可以直接查询数据库

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. 生产环境

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

仅允许在页面中使用

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

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

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

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

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

你已完成章节26

接下来

27: 在请求时获取数据

开始第 27 章