如何在 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中文網其他相關文章！