Next.js
[Next] SSR & CSR & SSG

CSR、SSR、SSG

在現代 Web 開發中，網頁渲染是一個重要的議題，它關係到網站性能和 SEO 排名。現在，有三種主要的網頁渲染方式：客戶端渲染 (CSR)、服務器端渲染 (SSR) 和靜態網站生成 (SSG)。

什麼是 CSR、SSR、SSG？

  • CSR (Client-Side Rendering) 客戶端渲染：在客戶端 (瀏覽器) 進行渲染，由 JavaScript 負責處理數據和生成 HTML。
  • SSR (Server-Side Rendering) 服務器端渲染：在服務器端進行渲染，生成 HTML 和 CSS，並在客戶端展示。
  • SSG (Static Site Generation) 靜態網站生成：在部署前生成靜態 HTML，不需要在瀏覽器或服務器上進行渲染。

CSR

CSR (Client-Side Rendering) 是一種網站渲染技術，利用 JavaScript 在瀏覽器端渲染網站內容。網站先載入簡單的 HTML 檔案，包含基本頁面結構和 JavaScript 檔案指令。瀏覽器載入後，JavaScript 請求資料並處理，再以動態生成 HTML 內容和呈現效果。提供豐富互動用戶體驗，可根據用戶操作動態載入和呈現資料，是 React 和 Vue 等前端框架的默認渲染方式。

csr-rendering

CSR 的優缺點

優點：

  • 應用程序可以在瀏覽器中快速加載和運行，因為只有數據需要從服務器獲取。
  • 客戶端渲染可以提供一個交互性和動態的用戶界面，用戶體驗更好。
  • 開發人員可以更快速地開發應用程序，因為沒有需要在服務器上進行的渲染過程。

缺點：

  • CSR 的首次加載時間比 SSR 慢，因為瀏覽器需要先下載 JavaScript 和 CSS，然後再由 JavaScript 生成 HTML。
  • 由於沒有渲染的內容不會被加入到 SEO 中的 indexing ，所以 CSR 對 SEO 不友好，當然目前也有相應的方法進行 SEO 優化的，如(Nginx,second wave of indexing)
  • 在許多較老的瀏覽器上，CSR 的性能可能會受到限制，因為較低的 CPU 和內存可能無法處理大型應用程序， 這部分能透過 code splitting 拆分 js bundle、dynamic-imports、lazy-loading 等方式來解決，但是解決的問題也是有限的。

常見的 CSR 應用場景

  1. 單頁應用程序（SPA）：SPA 是一個完全基於 CSR 架構構建的應用，從以前網站需要各種 html 檔，現在只需要一個簡單的根結點:

下面以 React 為例子

example.html
<html>
  <head></head>
  <body>
    <div id="root"></div>
  </body>
</html>
Counter.jsx
import React, { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    setCount(count + 1);
  };
 
  return (
    <div>
      <h1>計數器應用程式</h1>
      <p>您已經點擊了 {count} 次。</p>
      <button onClick={handleClick}>點我</button>
    </div>
  );
}
 
export default Counter;

server 回傳只包含一個 的 html ， FCP(First Contentful Paint 渲染出的第一個內容，由於 CSR 頁面都只有一個根結點，頁面會呈現一片空白，所以常常會使用 Skeleton，告知用戶會有內容載入)，根據 id 下載對應的 js 檔案，解析並執行 react code，解析完畢才會 render 畫面，最後才達到 TTI(Time to Interactive 使用者可以開始跟頁面互動)。

  1. 重度客戶端應用：對於需要豐富客戶端交互的應用，CSR 可以通過 JavaScript 代碼的編寫和執行來實現，從而實現更好的用戶體驗。

需要注意的是，CSR 的主要缺點是對 SEO 不友好，因此如果網站需要良好的 SEO 結果，則需要考慮使用其他渲染方式，例如 SSR 或 SSG。

CSR 效能優化

SSR

SSG

References

useParams[Next] Hydration