---
tags: jsdc2021
---

# #Session 1 窮途末路的 SPA，堅持 CSR 到放棄

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %}

> 從這開始
> 可以直接打字做共筆囉 :point_down:

KK 徐凱
Web 實驗室

早期用 CSR 寫 SPA

# 名詞解釋

- MPA - CSR 靜態，多頁，單純把 JavaScript 套到網頁裡
- SPA - CSR AngularJS
- SSR => 是否涉及到後端
- 全渲染
- 只渲染一部分
- MPA + SSR -> 傳統框架
- Laravel
- Django + Flask
- Express.js + Template Engine
- SSR + SPA
- Next.js
- Nuxt.js
- GatsbyJS

### 詞彙

[Will 保哥給的專有名詞表](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#terminology) 的中文翻譯：

#### Render（渲染）相關

- SSR：伺服器端 render - 在伺服器將用戶端或通用 App 渲染成 HTML
- CSR：用戶端 Render - 在瀏覽器（通常使用 DOM）渲染 app
- Rehydration：使用伺服器渲染的 HTML 所包含的 DOM 與資料，並在用戶端啟動 JavaScript 進行初始化，讓之後的網頁採用 CSR 渲染。
- Prerendering：在編譯時執行 CSR App，並將其最初狀態擷取為靜態 HTML

<!-- Rendering

SSR: Server-Side Rendering - rendering a client-side or universal app to HTML on the server.
CSR: Client-Side Rendering - rendering an app in a browser, generally using the DOM.
Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data.
Prerendering: running a client-side application at build time to capture its initial state as static HTML. -->

#### 效能相關

- TTFB：第一個位元組到達的時間。通常是點下連結～內容第一個位元組收到的時間
- FP：首次繪製。使用者看到第一個像素的時間
- FCP：首次內容繪製。能看到請求內容（文章內文等）的時間
- TTI：可互動前所耗時間。頁面可以互動的時間（事件連接上的時間等）

<!-- Performance

TTFB: Time to First Byte - seen as the time between clicking a link and the first bit of content coming in.
FP: First Paint - the first time any pixel gets becomes visible to the user.
FCP: First Contentful Paint - the time when requested content (article body, etc) becomes visible.
TTI: Time To Interactive - the time at which a page becomes interactive (events wired up, etc). -->

# 為什麼要堅持用 CSR?

## 難解決的問題

- 動態資料
- CSR 要寫死資料在前端
- Blog 用 API 拿文章
- SEO: 不是每個搜尋引擎都有像 Google 的 JavaScript Engine!
- 搜尋引擎抓取的 open graph, metadata 多為動態資料

## 前往 SSR 的旅程


1. Reversed Proxy
- 很容易跟網站衝突
2. [react-snap](https://github.com/stereobooster/react-snap) 幫你把網站先 Render 好並 Cache 起來
3. 在網站前面即時 render 服務 1. + 2.
- Advantage
- 方便
- Disadvantage
- $$$
- cache 時間長短很難抓
4. Hybrid
* 先 SSR 再 CSR
* 對 Rendering 有額外的優化
* 但開發時要小心元件的使用

## 真正放棄 CSR 的理由

- 使用 CSR 要知道 client 登入狀態，必須先打一個 Request 到 server
-