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時遇到的未定義資料的問題。