如何使用伺服器元件及其他元件在 Next.js 中取得伺服器端資料？

Next.js 使用getStaticProps 及其他方式取得伺服器端資料

問題：

問題：

問題：

問題：

問題：

• 問題：

問題：

問題：
• 下一篇使用Django Rest Framework 的.js 應用程序，從REST API取得資料會導致未定義的值和執行時間映射資料時發生錯誤。

說明：

Next.js 方法（如 getStaticProps）專門為伺服器端資料擷取而設計，並且僅在頁面目錄中有效運作。但是，在最新版本的 Next.js 中，可以直接在應用程式目錄內的伺服器元件中取得資料。

// page.js
export default async function Page() {
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  return "...";
}

解決方案：

要解決此問題並執行 server-在最新的 Next.js中獲取側面數據，請考慮以下選項：

// layout.js OR page.js OR route.js
export const revalidate = 10;

使用伺服器組件：

// ...
async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

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

在組件主體內實現伺服器端數據獲取，如程式碼片段所示。 這種方法可以直接存取標頭和cookie 來進行資料擷取.使用路由段配置（用於資料庫互動）： 配置路由段以快取具有所需壽命（例如10 秒）的資料或完全停用快取。 此方法允許在資料擷取和快取策略，包括使用以下方式與資料庫直接互動ORM。 程式碼片段（伺服器元件）：程式碼片段（路由段設定）：程式碼片段（路由段設定）： 透過實作這些解決方案，您可以即使使用伺服器元件時，也可以有效地從伺服器取得資料並處理 Next.js 中的快取策略。

以上是如何使用伺服器元件及其他元件在 Next.js 中取得伺服器端資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！