DAY 25 - Vue SPA 單頁式/ MPA 多頁式 / Nuxt SSR / CSR

今日前言

接下來會提到 Nuxt 渲染方式，那就不得不提到本身渲染方式原理，所以就有了這篇的誕生，讓我們先來認識一下渲染的模式。

Vue 是 SPA 單頁式網站 ，SPA 採用的是 CSR 客戶端 (Client Side Render)渲染方式， 而一般網站則是 MPA 多頁式網站，採用的是SSR 伺服器端（Server side render）渲染，Nuxt 則是 SSR + SPA 的 Universal Rendering 渲染方式，下篇我們會再帶大家詳細了解 Nuxt 渲染方式， 今日先讓我們來了解 SPA/MPA 、SSR/CSR 兩者的差異及優缺。

重點整理:

• 前端框架 - SPA 單頁式網站，使用 CSR 客戶端(Client Side Render)渲染
• 一般網站 - MPA 多頁式網站，使用 SSR 伺服器端（Server side render）渲染
• Nuxt框架 - SSR + SPA 的 Universal Rendering 混合渲染，擁有兩者的優點

什麼是 SPA / MPA ?

• SPA 單頁式網站 (Single-Page Application)
• MPA 多頁式網站 (Multi-Page Application)

SPA 單頁式網站 (Single-Page Application)

SPA 單頁式網站是現在主流三大框架所使用的網站模式，不像傳統網站需要等待讀取時間，網站只有一頁式，透過抽換部分元件來，前面篇章 DAY 7 -深入了解 Dom 元素，了解 Virtual DOM 原理有提到，只會針對需更新的元件更新畫面，無須重整頁面，使用者體驗流暢

現在主流三大框架 都是採用 SPA 單頁式 + CSR 客戶端渲染，單頁式都會使用客戶端渲染，依照使用者瀏覽再去渲染畫面來讓 UX 體驗更好，不用每次都重新刷新讀取頁面

MPA 多頁式網站 (Multi-Page Application)

MPA 多頁式網站則是一般網站模式，每一頁都會有獨立的頁面，例如上圖有 page1.html、page2.html，並會由伺服器端渲染搭配 SSR 渲染模式，這類網站優點是每頁獨立，SEO 搜尋關鍵字佳，但是讀取時間及重新載入較差，每次切換頁面區刷新頁面。

SPA vs MPA 兩者優缺

可以看到詳細差異、優缺，其中最大差異則是:

• SPA 單一頁面，切換時間快、讀取速度佳
• SPA SEO差，需搭配其他配套( 像是 Nuxt 來解決 Vue 關鍵字問題)
• MPA 讀取慢，切換頁面整頁刷新，第一次進較快

面試常見問題 ! 什麼是 SPA ? 請你說明，重點照上面這樣回答就對了 !!
以上 圖片、資料引用自SPA 與 MPA 的差異比較

參考資料 :

• [Angular 深入淺出三十天] Day 01 - MPA 與 SPA
• SPA 與 MPA 的差異比較

什麼是 SSR / CSR ?

• 網頁渲染原理
• SSR 伺服器端渲染 （Server side render）
• CSR 客戶端渲染 (Client Side Render)

網頁渲染原理

當我們在瀏覽網頁時，瀏覽器(使用者)會向 Server (資料儲存) 請求得到網頁內容，包含前端三劍客 HTML、CSS、JavaScript 及相關資料、檔案，最終瀏覽器會將寫的程式轉換成畫面，呈現給瀏覽的使用者看，這就是「網頁渲染 Rendering」，其中包含解析 HTML 標籤及 DOM tree 、Css 建立等等。

SSR 伺服器端渲染 （Server side render）

什麼是 SSR 呢 ? SSR 就是伺服器端渲染，一般傳統網頁都會使用的模式，每一頁都像是全新空白的，每次發送請求都會回傳到伺服器端，再由伺服器端回傳網站結果，也跟上面提到的 MPA 多頁式網站每頁都是獨立的，所以每次切換頁面都會向伺服器端重新發送請求、重新讀取

CSR 客戶端渲染 (Client Side Render)

什麼是 CSR 呢 ? CSR 就是客戶端渲染，客戶端也可以稱做使用者端，會透過使用者瀏覽來渲染畫面，再初次進入網頁時一次讀取，接著透過 JavaScript 與客戶端來處理切換，不需要再透過伺服器端，搭配 SPA 來讀取元件切換畫面。

辨識網站 SSR / CSR

CSR
辨識的方式很簡單，對網站點選右鍵查看網頁原始碼，可以用Vue 官網右鍵開啟看看

當點開後，本來應該正常一般網站會顯示很多 html，但是我們只看到少少的內容，那這是一個 CSR 渲染網頁

SSR
反之，如果看到的是正常的 html 結構，就是屬於一般的 SSR 渲染方式。
可以用我個人的Side project 查看一般網頁原始碼，這就是屬於 SSR 渲染網頁

點開 F12 開發者工具還是可以看到完整的 Html 喔 !

參考資料 :

• 淺談 SPA、CSR、SSR、MPA、SSG 專有名詞
• SSR 還是 CSR？ 3 分鐘了解網頁渲染對 SEO 的影響