[Next.js] 三種渲染方法 - SSR、CSR、SSG：優缺點分析

當建立網頁應用時，向使用者呈現內容的方式極為關鍵。網頁渲染有多種方法，每種皆有其優缺點。本文將深入探討網頁渲染的三大主要方法：伺服器端渲染（SSR）、客戶端渲染（CSR）以及靜態站點生成（SSG），並詳細說明各自的使用時機和優缺點，以便讓初學者也能輕鬆理解。

了解SSR（伺服器側渲染）

SSR（Server Side Rendering）指的是在伺服器上進行網頁渲染的方式。

當使用者訪問某網頁時，伺服器會完整地渲染該頁面內容，並將整體的HTML格式頁面傳送至使用者的瀏覽器。因此，瀏覽器能夠直接呈現頁面，無需進行額外的JavaScript操作。

SSR（伺服器側渲染）的運作過程

  1. 請求：使用者請求訪問某網頁，此請求被送至伺服器。
  2. 資料獲取：伺服器透過資料庫或API取得所需資料。
  3. 渲染：伺服器利用獲取的資料完整渲染網頁。
  4. 回應：伺服器將渲染好的網頁傳送給使用者。
  5. 顯示：使用者的瀏覽器顯示從伺服器接收的渲染完成的網頁。

SSR範例：利用Next.js的簡單示範

Next.js提供工具讓您輕易實施SSR。以下是使用Next.js進行SSR的簡單示例。

1. 資料獲取函數： 首先，我們在伺服器端撰寫一個資料獲取函數。此示例將使用一個回傳模擬資料的函數。

javascript
function fetchData() {
  return {
    title: "Next.js 與 SSR",
    content: "深入了解利用 Next.js 進行伺服器端渲染"
  };
}

2. 網頁渲染： 在Next.js中，我們可以使用 getServerSideProps 函數在伺服器端獲取資料，然後將這些資料傳遞給網頁元件。

javascript
export async function getServerSideProps() {
  const data = fetchData();
  return {
    props: { data }
  };
}

function HomePage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default HomePage;

在上述示例中，getServerSideProps只在伺服器端運行，取得的資料將傳遞給HomePage元件。因此，使用者可以直接看到已渲染的HomePage元件。

如此，只需幾行簡單的代碼即可利用Next.js實現SSR，這對於想要提高網頁載入速度和改善SEO的開發者來說，是一個非常有用的工具。

SSR（伺服器側渲染）的優點與缺點

SSR是在伺服器端渲染網頁應用的一種方式。這種方法在某些情境下有明顯的優點，但也存在一些缺陷。了解這些優缺點，將有助於決定SSR是否適合您的項目。

SSR的優點

  1. 快速的初始頁面載入速度： 使用者可以立即獲得包含所有必要數據的渲染頁面，從而大大提高使用者體驗（UX）。
  2. SEO優化： 搜索引擎爬蟲可以輕易識別和索引伺服器端渲染的頁面內容，即使在不執行JavaScript的環境下，也能提高SEO效益。
  3. 有效的緩存策略： 針對SSR，可以將一次渲染的HTML頁面存儲在緩存中，當收到相同的請求時，可使用緩存中的數據迅速回應，例如流行的博客文章或不常更改的靜態頁面。這不僅減少了伺服器的負荷，而且還能為使用者提供更快的頁面載入時間。
  4. 瀏覽器兼容性： 當使用基於JavaScript的前端框架時，某些舊版本的瀏覽器可能不支持某些JS功能。使用SSR，伺服器將渲染頁面並將完成的HTML提供給客戶端，因此不再依賴於客戶端瀏覽器的JavaScript執行能力。

SSR的缺點

  1. 伺服器壓力增加： 每次請求，伺服器都需要進行頁面渲染，這將增加伺服器的CPU和記憶體使用量。如果不實施有效的緩存策略，伺服器可能會過載，導致響應時間變慢。
  2. 複雜的開發過程： SSR可能需要管理瀏覽器和伺服器之間的狀態同步，這會增加開發複雜性。
  3. TTFB (Time to First Byte) 可能會增加： 由於伺服器需進行資料取得和渲染工作，TTFB（從使用者請求頁面到接收伺服器的第一個字節的時間）可能會稍微增加。
  4. 依賴伺服器環境： SSR應用程式需要持續運行的伺服器，與靜態應用程式相比，部署和維護成本可能較高。

了解CSR（客戶端渲染）

客戶端渲染並不是在伺服器預先進行網頁渲染，而是在客戶端（即使用者的瀏覽器）直接渲染頁面。

當使用者訪問網站時，伺服器不提供完整的HTML結構，而是僅提供JavaScript文件。瀏覽器執行此JavaScript，通過API呼叫等方式獲取所需數據，然後組成網頁。

CSR（客戶端渲染）的運作過程

  1. 請求：當使用者訪問網站時，初次的HTML幾乎是空的，但包含了必要的JavaScript和CSS。
  2. 下載：使用者瀏覽器下載所需的JavaScript文件和CSS。
  3. 渲染：一旦JavaScript被下載並執行，它會從API或其他外部資源中獲取所需的數據，然後基於這些數據在客戶端渲染網頁。
  4. 顯示：數據一旦到達瀏覽器，網頁就會將渲染的內容展示給使用者。

這種方法在初次載入時可能需要較長的時間，但當數據或視圖發生變化時，不需要重新載入整個頁面，只更新變更的部分，從而提供了流暢的使用者體驗。

使用CSR時，是否必須使用Next.js？

使用React.js即可實現客戶端渲染。但使用Next.js相比僅使用React.js有多種顯著優勢。以下是Next.js的主要特點和優勢：

  1. 基於頁面的路由：Next.js基於文件和目錄結構自動提供路由，因此無需特定的路由設置即可輕鬆實現頁面之間的跳轉。
  2. 內建優化：Next.js內建了自動程式碼分割、優化圖片處理、全局CSS和模組CSS支援等多種優化功能。
  3. API路由：Next.js允許在/pages/api中建立API路由，輕鬆處理後端邏輯，無需單獨的伺服器即可處理API請求。
  4. 插件和社群支援：Next.js支援多種插件和擴展功能，並有一個龐大且活躍的社群，提供各種問題的解決方案和資源。

因此，如果僅需要客戶端渲染，使用React.js就足夠了。但考慮到網應用的成長、擴展性、多種渲染方法的需求以及優化功能，使用Next.js將帶來許多優勢。

CSR範例：利用Next.js的簡單示範

javascript
import { useEffect, useState } from 'react';

function HomePage() {
  const [data, setData] = useState({ title: '', content: '' });

  useEffect(() => {
    async function fetchData() {
      const mockData = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            title: '透過客戶端渲染的標題',
            content: '透過客戶端渲染的內容。'
          });
        }, 1000);
      });
      setData(mockData);
    }

    fetchData();
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default HomePage;

此程式碼在Next.js專案中展示了使用客戶端渲染來加載和渲染數據的例子。useEffect和useState是React的Hooks，用於管理組件的狀態和生命週期。

CSR（客戶端渲染）的優點與缺點

客戶端渲染是指所有渲染工作都在瀏覽器（客戶端）上完成的方法。這種方法特別適用於處理網應用的動態部分，尤其是在現代網應用，如SPA中經常被使用。

CSR的優點

  1. 快速互動：在初次加載之後，所有的渲染資源都已加載到客戶端，使得與使用者的互動非常迅速。
  2. 減少伺服器負擔：伺服器僅需要提供靜態文件（如JavaScript、CSS、HTML），因此減少了渲染的負擔。
  3. 前後端分離：由於透過API獲取數據，前後端的開發可以分開，使得可以同時進行開發，並易於建立高度可重用的組件結構。

CSR的缺點

  1. 初始加載延遲：由於瀏覽器需要下載並執行所有的JavaScript文件，初始加載時間可能會較長。
  2. SEO困難：搜索引擎的爬蟲可能在運行JavaScript時會遇到困難，因此未渲染的頁面對SEO可能不是太友好。
  3. 瀏覽器相容性問題：必須考慮各種瀏覽器及其版本，確保所有用戶都能夠正確地查看和互動。

了解SSG（靜態網站生成）

SSG（靜態網站生成）是事先將所有網頁轉化為靜態文件的方法。

透過此方式產生的網頁，每當伺服器收到請求時，均會向客戶端提供相同的文件。此策略特別適合內容較少變動的網站，例如部落格、行銷網站、文件站等。

SSG（靜態網站生成）的運作過程

  1. 構建時刻：在開發者進行網站構建時，所有的網頁都事先被轉化為靜態文件，並將所需資料從外部來源（如：資料庫、API）獲取並整合其中。
  2. 請求：當用戶請求訪問某網頁時，此請求將被傳遞至伺服器或CDN。
  3. 回應：已經生成的靜態文件會立刻提供給用戶，無需進一步的渲染或資料獲取。
  4. 顯示：用戶的瀏覽器將顯示從伺服器收到的靜態文件。

SSG範例：利用Next.js的簡單示範

javascript
export async function getStaticProps() {
  const data = await fetchData(); // 從外部獲取資料的函數
  return {
    props: { data }
  };
}

function BlogPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default BlogPage;

此代碼示例展示了如何使用Next.js的SSG功能靜態生成部落格頁面。getStaticProps 函數會在構建階段執行以獲取資料，並使用該資料生成靜態頁面。

SSG（靜態網站生成）的優點與缺點

SSG的優點

  1. 快速的加載速度：由於提供了事先生成的靜態文件，因此不需要伺服器的處理時間，且可透過CDN在全球任何地方迅速提供內容。
  2. SEO優化：預先生成的靜態頁面易於被網路爬蟲識別，因此有利於搜索引擎優化。
  3. 低伺服器成本：不需要動態處理，從而減少伺服器負載，進一步節省主機成本。
  4. 安全性：僅提供靜態文件，使其對各種伺服器端攻擊具有較高的安全性。

SSG的缺點

  1. 構建時間：對於大型網站，生成所有頁面可能需要較長時間。
  2. 實時更新限制：內容發生更改時，需要重新構建網站，因此可能不適合需要實時數據更新的應用程式。
  3. 動態處理限制：需要針對每個用戶有所不同的功能（例如：用戶帳戶功能）可能需要額外的客戶端邏輯。

綜上所述，SSG在特定情境和需求下可能非常有用。但選擇適當的渲染方式需要根據應用的特性和所需功能來考慮。

在網頁開發中，渲染是一個極其重要的部分。SSR、CSR、和SSG在不同的情境和需求下都能展現出色的性能。沒有一種方法可以在所有情境中被認為是最佳的。理解您所開發的網站或應用的特性、以及用戶的需求，並考慮上述三種方法的優缺點，來選擇最佳的方式是至關重要的。

© Copyright 2023 CLONE CODING