在 Next.js 中，可以通過兩種主要方式實現服務器端渲染 (SSR) 和靜態生成 (Static Generation)：getServerSideProps 和 getStaticProps。這兩個方法的主要區別在於數據獲取的時機和頁面的生成方式。下面詳細說明如何在 Next.js 中實現這兩種渲染方式。

服務器端渲染 (SSR)

使用 getServerSideProps

getServerSideProps 是 Next.js 提供的數據獲取方法，用於在每次請求時動態生成頁面。這使得頁面內容可以根據請求的不同而變化，例如基於用戶身份或請求參數。

實現步驟

1. 創建頁面文件：

在 pages 目錄中創建一個頁面文件，例如 pages/ssr-page.js。

1. 編寫 getServerSideProps 函數：

在頁面組件中定義 getServerSideProps 函數。這個函數會在每次請求時執行，並將返回的 props 傳遞給頁面組件。

// pages/ssr-page.js
import React from 'react';

const SSRPage = ({ data }) => {
  return (
    <div>
      <h1>Server-Side Rendered Page</h1>
      <p>Data: {data}</p>
    </div>
  );
};

export async function getServerSideProps(context) {
  // 從 API 或數據庫獲取數據
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  // 將數據作為 props 傳遞給頁面
  return {
    props: {
      data,
    },
  };
}

export default SSRPage;

靜態生成 (Static Generation)

使用 getStaticProps

getStaticProps 是 Next.js 提供的另一個數據獲取方法，用於在構建時 (build time) 預先生成靜態頁面。這些靜態頁面在構建後不會再動態更新，除非重新構建。

實現步驟

1. 創建頁面文件：

在 pages 目錄中創建一個頁面文件，例如 pages/static-page.js。

1. 編寫 getStaticProps 函數：

在頁面組件中定義 getStaticProps 函數。這個函數會在構建時執行，並將返回的 props 傳遞給頁面組件。

// pages/static-page.js
import React from 'react';

const StaticPage = ({ data }) => {
  return (
    <div>
      <h1>Static Generated Page</h1>
      <p>Data: {data}</p>
    </div>
  );
};

export async function getStaticProps() {
  // 從 API 或數據庫獲取數據
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  // 將數據作為 props 傳遞給頁面
  return {
    props: {
      data,
    },
  };
}

export default StaticPage;

增量靜態生成 (Incremental Static Regeneration, ISR)