Next.js 是一个基于 React 的服务器渲染应用框架，它提供了一些非常有用的功能，其中包括 getStaticProps 和 getStaticPaths。这两个函数可以帮助我们在构建静态站点时获取服务器数据，从而让我们的站点更加动态和有趣。本文将介绍如何使用 Next.js 中的这两个函数来获取服务器数据，并提供一些示例代码来帮助您入门。
getStaticProps 和 getStaticPaths 的基本介绍
在介绍具体的用法之前，我们先来了解一下 getStaticProps 和 getStaticPaths 的基本概念。
getStaticProps 函数是 Next.js 中的一个异步函数，它的作用是在构建时获取服务器数据，并将数据作为 props 传递给页面组件。这个函数只在服务器端执行，而不会在客户端执行。在构建时，Next.js 会预渲染页面，并将获取到的数据一并打包到页面中，这样页面就可以在客户端渲染时直接使用这些数据，而不需要再次向服务器请求。
getStaticPaths 函数也是 Next.js 中的一个异步函数，它的作用是生成静态页面路径。当我们需要动态生成页面时，可以使用这个函数来生成所有可能的页面路径。这个函数也只在服务器端执行，而不会在客户端执行。
使用 getStaticProps 获取服务器数据
下面是一个使用 getStaticProps 函数获取服务器数据的示例代码：
// javascriptcn.com 代码示例
import React from 'react'
export default function HomePage({ data }) {
return (
<div>
<h1>HomePage</h1>
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
)
}
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data')
const data = await res.json()
return {
props: {
data,
},
}
}在上面的示例代码中，我们首先定义了一个 HomePage 组件，它接受一个名为 data 的 props。然后，在 getStaticProps 函数中，我们使用 fetch 函数从服务器获取数据，并将获取到的数据作为 props 返回。在 HomePage 组件中，我们通过 map 函数遍历数据，并将其渲染为一个列表。
需要注意的是，getStaticProps 函数只在构建时执行一次，而不会在客户端执行。所以，如果您需要从客户端获取数据，您需要使用其他的函数，比如 getServerSideProps 或者使用客户端请求数据。
使用 getStaticPaths 动态生成页面路径
下面是一个使用 getStaticPaths 函数动态生成页面路径的示例代码：
// javascriptcn.com 代码示例
import React from 'react'
import { useRouter } from 'next/router'
export default function BlogPage({ data }) {
const router = useRouter()
const { id } = router.query
const post = data.find((item) => item.id === parseInt(id))
return (
<div>
<h1>BlogPage</h1>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
)
}
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/posts')
const data = await res.json()
const paths = data.map((item) => ({
params: {
id: item.id.toString(),
},
}))
return {
paths,
fallback: false,
}
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.id}`)
const data = await res.json()
return {
props: {
data,
},
}
}在上面的示例代码中，我们首先定义了一个 BlogPage 组件，它接受一个名为 data 的 props。然后，在 getStaticPaths 函数中，我们使用 fetch 函数从服务器获取数据，并使用 map 函数生成所有可能的页面路径。在 getStaticProps 函数中，我们使用 params.id 来获取当前页面的数据，并将获取到的数据作为 props 返回。在 BlogPage 组件中，我们使用 useRouter 函数获取当前页面的 id，并使用 find 函数获取当前页面的数据。
需要注意的是，fallback 属性用来控制当用户访问不存在的页面时的行为。如果 fallback 为 true，那么 Next.js 将会在客户端渲染时动态生成页面。如果 fallback 为 false，那么 Next.js 将会返回 404 页面。
总结
在本文中，我们介绍了如何使用 Next.js 中的 getStaticProps 和 getStaticPaths 函数来获取服务器数据，并提供了一些示例代码来帮助您入门。虽然这两个函数非常有用，但是它们并不是万能的。在实际开发中，您需要根据具体的需求来选择合适的函数，并根据需要进行修改和扩展。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6569543dd2f5e1655d1dee29