SSR、ISR 還是 SSG：2025 年到底哪個讓你的網站更快？

作者：前端小智 2025-07-23 04:00:00

開發前端

Next.js 14 及以上版本支持按頁面靈活使用 SSR、ISR 和 SSG。這意味著你無需“非此即彼”，動態頁面用 SSR，產品頁面用 ISR，營銷頁面用 SSG，全部混合在一個應用中。

過去，搭建網站很簡單。你往頁面里塞點 HTML，加點 CSS，覺得有趣還會加點 JavaScript。

但現在？一切都圍繞性能、SEO 和用戶體驗展開，選擇合適的渲染方式成了重中之重。

現代網頁渲染的“三劍客”：SSR（服務器端渲染）、ISR（增量靜態再生）、SSG（靜態站點生成）。

問題是：每個開發者似乎都有心頭好，你卻茫然不知哪個才能真正提速。

別著急——答案是“視情況而定”。但看完這篇文章，你將知道哪種渲染適合你的項目。

SSR（服務器端渲染）

SSR 在用戶每次請求時動態生成頁面。意味著內容總是最新的，但服務器壓力也相應增大。

優點：

始終提供最新內容。
對 SEO 友好，搜索引擎獲得完整渲染的 HTML。
支持個性化內容展示。

缺點：

首字節時間（TTFB）較長，服務器渲染需要時間。
高流量下服務器負載重，成本高。

示例：Next.js SSR（Pages Router）

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

示例：Next.js SSR（App Router）

// app/users/page.jsx
import React from 'react';

async function getUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

適用場景：

實時動態數據（如用戶儀表盤）。
個性化內容（登錄用戶、地理位置相關內容）。
對 SEO 有高要求且需最新內容的頁面。

ISR（增量靜態再生）

ISR 是 SSG 的智能升級版。預先靜態生成頁面，同時可在后臺定時再生，實現內容更新，無需全部重建。

優點：

首次加載極快（靜態文件）。
能局部更新內容，避免全量重構。
適合高訪問量網站。

缺點：

更新周期內，首個訪問者可能看到舊內容。
配置比 SSR 和 SSG 復雜。

示例：Next.js ISR

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { 
    props: { data },
    revalidate: 60, // 每 60 秒重新生成
  };
}

適用場景：

偶爾更新的內容（博客、產品頁面）。
大型站點需加快構建速度（電商平臺）。
SEO 友好且內容半靜態的頁面。

SSG（靜態站點生成）

SSG 在構建時生成所有頁面。部署后用戶請求時直接獲取靜態文件，是最快的體驗，但內容不更新，除非重新部署或配合 ISR。

優點：

速度極快（靜態文件）。
用戶請求無服務器壓力。
SEO 友好，預渲染頁面。

缺點：

內容直到重建或 ISR 更新前保持靜態。
動態路由多時構建時間急劇增長。

示例：Next.js SSG

export async function getStaticPaths() {
  const res = await fetch('https://.../posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  return { paths, fallback: false };
}

適用場景：

博客文章、文檔、營銷頁面。
內容極少變動的網站。
不依賴用戶數據的內容展示。

SSR vs ISR vs SSG：誰才是王者？

答案其實很簡單：

SSR：適合需要個性化和頻繁變更的動態內容。
ISR：適合大型內容豐富且需保持內容新鮮的站點。
SSG：適合快速、穩定、少變的頁面；可結合 ISR 享受雙重優勢。

未來是混合渲染

真正的未來不是單一渲染策略，而是懂得何時用哪種策略。

你準備好升級你的 Next.js 應用了么？你最喜歡用哪種渲染方式？

責任編輯：武曉燕來源：大遷世界