Next.js Rendering: SSR, SSG, ISR, CSR

By fluberJavaScript、Jest、Next.js、Node.js、TypeScript、未分類

Server-Side Rendering: SSR

何時執行？ 每次請求時，在伺服器端執行 getServerSideProps 來產生 HTML。優點：

  • 確保每次請求都獲得最新的數據。
  • 適合需要即時更新內容的頁面（如個人化內容、動態數據）。

缺點：

  • 需要每次請求都經過伺服器，可能會影響效能。
  • 使用者要等到頁面加載完成才能看到內容。
import type {
    GetServerSideProps,
    GetServerSidePropsContext,
    InferGetServerSidePropsType,
    NextPage,
    PreviewData
} from "next";

import { ParsedUrlQuery } from "querystring";
import { fetchNames } from "@/utils/fetch-names";

type responseItemType = {
    id: string;
    name: string;
};

const NamesSSR: NextPage = (props: InferGetServerSidePropsType<typeof getServerSideProps>) => {

    const output = props.names.map((item: responseItemType, idx: number) => {
        return (
            <li key={`name-${idx}`}>
                {item.id} : {item.name}
            </li>
        );
    });

    return (
        <ul>
            {output}
        </ul>
    );
};

export const getServerSideProps: GetServerSideProps = async (
    _context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>
) => {

    let names: responseItemType[] | [] = [];
    try {
        names = await fetchNames();
    } catch (error) {

    }
    return {
        props: {
            names
        }
    }
}

export default NamesSSR;

Static Site Generation: SSG

何時執行？ 在 build 時執行 getStaticProps，預先生成 HTML，並在 CDN 上提供。優點：

  • 頁面載入速度最快，因為是靜態 HTML。
  • 減少伺服器負擔，適合 SEO 需求的頁面（如部落格、說明頁面）。

缺點：

  • 內容不能即時更新，除非重新部署。
import type {
    GetStaticProps,
    GetStaticPropsContext,
    InferGetStaticPropsType,
    NextPage,
    PreviewData
} from "next";

import { ParsedUrlQuery } from "querystring";
import { fetchNames } from "@/utils/fetch-names";

type responseItemType = {
    id: string;
    name: string;
};

const NamesSSG: NextPage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {

    const output = props.names.map((item: responseItemType, idx: number) => {
        return (
            <li key={`name-${idx}`}>
                {item.id} : {item.name}
            </li>
        );
    });

    return (
        <ul>
            {output}
        </ul>
    );
};

export const getStaticProps: GetStaticProps = async (
    _context: GetStaticPropsContext<ParsedUrlQuery, PreviewData>
) => {

    let names: responseItemType[] | [] = [];
    try {
        names = await fetchNames();
    } catch (error) {

    }
    return {
        props: {
            names
        }
    }
}

export default NamesSSG;

Incremental Static Regeneration: ISR

何時執行？ 在 build 時先生成靜態頁面，但允許根據 revalidate 參數在後台重新生成。優點：

  • 具有 SSG 的高效能，同時能夠定期更新內容。
  • 避免 SSR 的高請求成本。

缺點：

  • 第一次請求時仍是舊數據，直到 revalidate 觸發新數據。
import type {
    GetServerSideProps,
    GetServerSidePropsContext,
    InferGetServerSidePropsType,
    NextPage,
    PreviewData
} from "next";

import { ParsedUrlQuery } from "querystring";
import { fetchNames } from "@/utils/fetch-names";
import { relative } from "path";

type responseItemType = {
    id: string;
    name: string;
};

const NamesISR: NextPage = (props: InferGetServerSidePropsType<typeof getServerSideProps>) => {

    const output = props.names.map((item: responseItemType, idx: number) => {
        return (
            <li key={`name-${idx}`}>
                {item.id} : {item.name}
            </li>
        );
    });

    return (
        <ul>
            {output}
        </ul>
    );
};

export const getServerSideProps: GetServerSideProps = async (
    _context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>
) => {

    let names: responseItemType[] | [] = [];
    try {
        names = await fetchNames();
    } catch (error) {

    }
    return {
        props: {
            names,
            relative: 30
        }
    }
}

export default NamesISR;

Client-Side Rendering: CSR

何時執行？ 頁面載入後，透過 useEffect 或 SWR 於客戶端請求 API 來獲取數據。優點：

  • 避免伺服器負擔，使用者可獲取最新數據。
  • 適合個人化內容（如登入用戶的儀表板）。

缺點：

  • SEO 可能受影響，因為爬蟲可能無法即時獲取內容。
  • 初次載入時畫面可能是空白，需加載指示（loading state）。
import type {
    NextPage
} from "next";

import { useEffect, useState } from "react";
import { fetchNames } from "@/utils/fetch-names";

type responseItemType = {
    id: string;
    name: string;
};

const NamesCSR: NextPage = () => {

    const [data, setData] = useState<responseItemType[] | []>();

    useEffect(() => {
        const fetchData = async () => {
            let names;
            try {
                names = await fetchNames();
            } catch (error) {
            }
            setData(names);
        }

        fetchData();
    });

    const output =data?.map((item: responseItemType, idx: number) => {
        return (
            <li key={`name-${idx}`}>
                {item.id} : {item.name}
            </li>
        );
    });

    return (
        <ul>
            {output}
        </ul>
    );
};

export default NamesCSR;

什麼時候該用哪種方法？

情境適合的渲染方式
內容頻繁變動，需要 SEOSSR
靜態內容，部署時就已確定SSG
靜態內容，但希望能定期更新ISR
內容變動頻繁，且不影響 SEOCSG

你是要針對特定的應用場景選擇適合的渲染方式嗎？

📌 SEO（Search Engine Optimization，搜尋引擎最佳化）是什麼？

SEO 是一種 優化網站 以提升在 Google、Bing、Yahoo 等搜尋引擎中的排名，讓更多人能夠在搜尋時找到你的網站。

📊 為什麼 SEO 很重要？

  1. 增加網站流量 🚀
    • 透過 SEO，網站可以在搜尋結果排名更高，帶來 免費（自然）流量。
  2. 提高品牌曝光度 🔥
    • 排名越高，越多人點擊，品牌知名度也會提升。
  3. 降低廣告成本 💰
    • 相較於 Google Ads 等 付費廣告，SEO 是 長期免費 的流量來源。
  4. 增加轉換率 🎯
    • 精準的關鍵字讓你的網站吸引到有需求的訪客，提升成交機會。

⚡ SEO 主要分為三大類

1️⃣ 站內 SEO（On-Page SEO）

  • 影響 網站內容 是否符合搜尋引擎的標準，例如：
    • 關鍵字優化：標題、內文、圖片都要包含 熱門搜尋關鍵字
    • 網站結構：使用 H1、H2、H3 標題標籤
    • 內部連結：增加文章之間的連結，提升使用者體驗
    • 網站速度優化：使用快取、壓縮圖片、優化 JavaScript 讓載入更快

2️⃣ 站外 SEO（Off-Page SEO）

  • 透過 外部資源提升網站權重，例如：
    • 外部連結（Backlinks）：高權重網站連結你的網站（例如新聞報導、部落格推薦）
    • 社群媒體：透過 Facebook、Twitter、Instagram 等平台推廣
    • 品牌曝光：提升品牌在網路上的討論度，提高搜尋可信度

3️⃣ 技術 SEO（Technical SEO）

  • 影響搜尋引擎 如何索引（Index）你的網站：
    • Sitemap（網站地圖）：讓 Google 知道你的網站有哪些頁面
    • robots.txt：控制搜尋引擎可以存取哪些內容
    • HTTPS 安全性：使用 SSL 憑證，讓網址是 https:// 開頭
    • 行動裝置優化（Mobile-Friendly）：讓網站在手機上也能快速瀏覽

🔎 SEO 關鍵優化技巧

✅ 選擇高流量關鍵字（使用 Google Trends、Ahrefs、SEMrush 分析）
✅ 寫出高品質內容（滿足使用者需求，不要只是關鍵字堆砌）
✅ 增加外部連結（找其他網站推薦你的內容）
✅ 網站速度要快（Google PageSpeed Insights 測試）
✅ 提升用戶體驗（UX）（減少彈出視窗、提高可讀性）

🎯 SEO vs SEM（搜尋引擎行銷）

比較項目SEO（自然排名）SEM（付費廣告，如 Google Ads）
成本免費，但需要時間需要花錢投廣告
見效時間需要 3-6 個月立即見效
穩定性長期有效停止付費後就沒效果
競爭難度需要內容和外部連結只要預算夠高就能排前面

🔹 SEO 適合長期經營，建立品牌和穩定流量
🔹 SEM 適合短期推廣，例如新產品上市或活動宣傳

🔚 結論

SEO 是讓網站在 搜尋引擎排名更高 的優化技術，主要分為 站內 SEO、站外 SEO、技術 SEO。雖然見效時間較長，但能帶來 免費且穩定 的流量，是網站行銷不可或缺的一部分！🚀💡