这是我参与「第五届青训营 」伴学笔记创作活动的第 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 包中。这意味着您可以编写诸如直接数据库查询之类的代码,而无需将它们发送到浏览器。
开发与生产
- 在开发(npm run dev或yarn dev)中,getStaticProps在_每个请求_上运行。
- 在生产环境中,getStaticProps 在_构建时 _运行。但是,可以使用 getStaticPath 返回的fallback key来增强此行为
由于它打算在生成时运行,因此无法使用仅在请求时可用的数据,例如查询参数或 HTTP 标头。
仅允许在页面中使用
getStaticProps只能从页面导出。您无法从非页面文件导出它。
此限制的原因之一是 React 需要在呈现页面之前拥有所有必需的数据。
如果我需要在请求时获取数据怎么办?
由于静态生成在生成时发生一次,因此它不适用于频繁更新或每个用户请求更改的数据。
在这种情况下,您的数据可能会更改,您可以使用服务器端呈现。让我们在下一节中了解有关服务器端呈现的更多信息。