# 網頁渲染技術整理
# 渲染方式總覽
依照複雜程度排序
* 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)。效能上會是最好的，因為主要是使用者自己的瀏覽器承擔渲染，對於伺服器的負擔減輕許多。
```HTML
react app
```
### 缺點
因為畫面是動態渲染的，對於 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](https://reactions-demo.vercel.app/)
### 缺點
沒有預渲染的頁面，使用者首次訪問會看到一個 Fallback 畫面，此時 Server Side 開始渲染後才會看到畫面。對於預渲染的頁面，使用者直接從 CDN 載入。但頁面可能是已經過期的，只有在使用者重新刷新，第二次訪問才會看到新的資料。
## DPR (Distributed Persistent Rendering)
去除 ISR 的 Fallback，而是使用 On-demand Builder 來處理未經預渲染的頁面。
### 缺點
新頁面的訪問會時間較久，難以防禦 DDoS 攻擊