如何在 Next.js 13 中有效地取得資料以避免未定義的資料？-js教程-PHP中文網

如何在 Next.js 13 中有效地取得資料以避免未定義的資料？

DDD

發布： 2024-11-19 02:37:02

原創

619 人瀏覽過

How can I Fetch Data Efficiently in Next.js 13 to Avoid Undefined Data?

Next.js 中的資料取得障礙：解決未定義的資料

Next.js 提供了多種伺服器端資料取得的方法，包括getStaticProps 和getServerSideProps 。但是，這些方法主要適用於頁面資料夾中的頁面元件。在 Next.js 13 中，出現了一個稱為伺服器元件的新概念，允許直接在元件體內取得資料。

伺服器元件：全面的解決方案

伺服器元件提供了更靈活的方法資料擷取，使開發人員能夠：

在伺服器上取得數據，並且可以選擇快取結果，類似getStaticProps。
在每個請求上取得數據，類似於 getServerSideProps。
指定自訂重新驗證策略。

要使用伺服器元件，請將您的元件定義為預設元件匯出應用程式目錄中的檔案。可以使用以下方法在元件體內執行資料擷取：

import { headers, cookies } from "next/headers";

export default async function Component({ params, searchParams }) {
  // Cached until manually invalidated
  const staticData = await fetch(`https://...`, { cache: "force-cache" });

  // Refetched on every request
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  // Revalidated with a 10-second lifetime
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });
}

登入後複製

替代方法

除了伺服器元件之外，您還可以使用函式庫或直接與資料庫互動來取得資料使用 ORM。在這種情況下，你可以利用路由段配置：

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

import prisma from "./lib/prisma";

// Caching options
export const revalidate = 10; // Revalidate every 10s
// OR
export const dynamic = "force-dynamic"; // No caching

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

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

登入後複製

透過使用伺服器元件或替代方法，你可以在Next.js 中高效地獲取伺服器上的數據，解決依賴時遇到的未定義資料的問題僅在getStaticProps 上。

以上是如何在 Next.js 13 中有效地取得資料以避免未定義的資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！