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

歡迎來到 JSDC 2021 共筆

共筆入口：https://hackmd.io/@JSDC-tw/2021conference
手機版請點選上方 按鈕展開議程列表。

共筆協作，共享知識，打造開放社群。

Welcome to JSDC 2021 Collaborative Writing

Collaborative Writing Workplace：https://hackmd.io/@JSDC-tw/2021conference
Using mobile please tap to unfold the agenda.

Build a community with open collaboration.

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

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 保哥給的專有名詞表 的中文翻譯：

Render（渲染）相關

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

效能相關

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

為什麼要堅持用 CSR?

難解決的問題

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

前往 SSR 的旅程

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

真正放棄 CSR 的理由

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