核心摘要： 在 Next.js 的 App Router (/app) 架構中已不再使用 getStaticProps 與 getServerSideProps。取而代之的是基於 React Server Components (RSC) 的全新資料獲取模式。（這些 API 在 Pages Router 中仍然使用）

以下主要討論 App Router 架構 (/app)，Pages Router(/pages)僅做對照。

🔁 API 演進對照表

🏗️ 架構轉型：為什麼 App Router 不再使用舊 API？

1. Server Components (伺服器元件)

• 角色定位： App Router 中所有元件預設皆為 Server Components。
• 取代邏輯： 元件直接在伺服器端運行，具備非同步執行能力（async/await）。
• 優勢： * 可以在元件內直接呼叫資料庫或 API。
  • 不需要透過 props 作為中介，減少了資料序列化（Serialization）的成本。
  • 大幅減少傳送到客戶端的 JavaScript 體積。

2. Client Components (客戶端元件)

• 宣告方式： 於檔案頂端加入 'use client'。
• 角色定位： 僅用於處理瀏覽器互動（如 useState, useEffect, onClick）。
• 關鍵差異： 它不負責「取代」資料獲取 API，而是承接 Server Components 處理完後的資料進行操作。

💻 實作範例：從舊轉新

舊版 SSR 寫法 (Pages Router)

JavaScript

export async function getServerSideProps() {
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}