網頁渲染技術整理
SSR SSG CSR ISR DPR
渲染方式總覽
依照複雜程度排序
- CSR：Client Side Rendering
- SSR：Server Side Rendering
- SSG：Static Site Generation
- ISR：Incremental Site Rendering
- DPR：Distributed Persistent Rendering
CSR (Client Side Rendering)
CSR 可以想像就是網頁是在依靠瀏覽器渲染畫面，Server Side 只提供畫面所需要的資料和邏輯。CSR 通常用於建構成 SPA (Single-Page Application)。效能上會是最好的，因為主要是使用者自己的瀏覽器承擔渲染，對於伺服器的負擔減輕許多。
<!DOCTYPE html>
<html lang="en">
<head>
<title data-react-helmet="true">react app</title>
<noscript>
</noscript>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/bundle.js" defer=""></script>
<script type="text/javascript" src="/static/js/main.chunk.js" defer=""></script>
</body>
</html>
缺點
因為畫面是動態渲染的，對於 SEO 是比較不友善的。雖然 Google 說有對其支援 JavaScript 生成的畫面 (坦白說，沒有很好，別信它)。
SSG (Static Site Generation)
簡單的說就是生成一個「靜態頁面」，在建構時候直接把結果頁面輸出成 HTML，等待需要存取時就回傳給 Client，相當於一個靜態資源。可以將此儲存到 CDN 做為快取使用，減輕 Server 壓力，也有利於 SEO。
缺點
只適用於不需要經常變動的頁面，不需要每次重新生成畫面。跟 SSR 一樣，資料變動時就需要重新渲染整個頁面。更新的成本是大的。
SSR (Server Side Rendering)
不同於 CSR 是將網頁交給 Client 去渲染，SSR 則是將渲染的工作交給了 Server Side，渲染一個完整的 HTML 給 Client。這種方式最大的優點就是 SEO-friendly，First screen rendering 也比較快。
缺點
Server 承擔更多負擔，而且轉換到新頁面時可能都會需要等待渲染完成，跟 SSG 一樣更新的成本較大。
ISR (Incremental Site Rendering)
關鍵性頁面：使用 SSG 的方式，儲存到 CDN 非關鍵頁面：先渲染 Fallback 畫面，然後 CSR 實際資料，同時對頁面進行非同步預渲染，之後更新到 CDN。更新策略依照 stale-while-revalidate。
此概念是 Next.js 在 9.5 版所提出的，有提供一個 Demo 網頁 Static Reactions Demo
缺點
沒有預渲染的頁面，使用者首次訪問會看到一個 Fallback 畫面，此時 Server Side 開始渲染後才會看到畫面。對於預渲染的頁面，使用者直接從 CDN 載入。但頁面可能是已經過期的，只有在使用者重新刷新，第二次訪問才會看到新的資料。
DPR (Distributed Persistent Rendering)
去除 ISR 的 Fallback，而是使用 On-demand Builder 來處理未經預渲染的頁面。
缺點
新頁面的訪問會時間較久，難以防禦 DDoS 攻擊