获取数据

服务器组件的`async` 和`await`

可以在服务器组件中使用async 和await，获取数据。

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

为了使用基于Typescript的async服务器组件，要确保使用Typescript 5.1.3以上的版本，和@types/react 18.2.8以上的版本。

服务组件函数

Next.js提供有帮助的服务端函数。

cookies()
headers()

`use` 在客户端组件

use is a new React function that accepts a promise conceptually similar to await. use handles the promise returned by a function in a way that is compatible with components, hooks, and Suspense. Learn more about use in the React RFC.

客户端组件，不推荐使用use封装fetch，这可能导致多次重复渲染。现在，如果需要在客户端拉数据，最好使用SWR，或React Query。

静态数据拉取

默认fetch拉取数据，并且无限期的保存在cache中。

数据刷新

刷新缓存数据，添加fetch的选项，next.revalidate

1	fetch('https://...', { next: { revalidate: 10 } }) (数据缓存10s有效)

如果需要每次fetch都重新获取数据，不使用cache，需要增加cache:'no-store'选项

1	fetch('https://...', { cache: 'no-store' })

数据拉取模式

并行拉取

利用Promise.all同时拉取多个数据。

路由中阻塞渲染

在Layout中，拉数据或导致整个页面阻塞，等到数据加载完成后，才能启动。

###不使用fetch()的数据拉取

使用第三方库拉取数据，还需要控制和刷新缓存，就需要通过默认缓存行为，或者segment缓存配置。

通过直接导出revalidate可以对缓存策略进行配置。

import prisma from './lib/prisma'
 
export const revalidate = 3600 // revalidate every hour
 
async function getPosts() {
  const posts = await prisma.post.findMany()
  return posts
}
 
export default async function Page() {
  const posts = await getPosts()
  // ...
}