如何在 Next.js 13 及更高版本中获取服务器端数据？

在 Next.js 中获取服务器端数据

在 Next.js 13 及更高版本中获取服务器端数据

在 Next.js 的最新版本中，“getStaticProps”和“getServerSideProps”方法被逐步被淘汰，让开发人员想知道如何在现代 Next.js 应用程序中获取服务器端数据。

服务器组件简介

在 Next.js 13 及更高版本中，服务器组件的引入提供了一种在服务器端获取数据的新方法。与传统的页面组件不同，服务器组件可以直接访问组件体内的数据获取逻辑。

服务器组件中的示例

以下代码片段说明了如何获取数据服务器组件中的服务器端：

export default async function Component() {
  // Fetch server-side data with caching options
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });

  return "...";
}

路由段配置

除了服务器组件之外，Next.js 还提供了路由段配置。这允许开发者控制特定路由或页面的缓存行为，甚至在服务器端数据获取期间也是如此。

路由段配置中的示例

此示例展示了如何配置使用路由段配置进行特定于路由的缓存：

// layout.js OR page.js OR route.js ??

export const revalidate = 10; // Revalidate every 10s
// ...

export default async function Page() {
  const posts = await getPosts();
  // ...
}

以上是如何在 Next.js 13 及更高版本中获取服务器端数据？的详细内容。更多信息请关注PHP中文网其他相关文章！