Next.js (8) | 青训营笔记

112 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

7getStaticProps 详细信息

以下是您应该了解的有关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()。您无需导入它。
您也可以直接查询数据库:

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

开发与生产

由于它打算在生成时运行,因此无法使用仅在请求时可用的数据,例如查询参数或 HTTP 标头。

仅允许在页面中使用

getStaticProps只能从页面导出。您无法从非页面文件导出它。
此限制的原因之一是 React 需要在呈现页面之前拥有所有必需的数据。

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

由于静态生成在生成时发生一次,因此它不适用于频繁更新或每个用户请求更改的数据。
在这种情况下,您的数据可能会更改,您可以使用服务器端呈现。让我们在下一节中了解有关服务器端呈现的更多信息。