# CSR、SSR前後端渲染 ###### tags:`補充` * Server-side Render(SSR): 由伺服器渲染的傳統網頁渲染方式，可以看到很多頁的 PHP，從 ==Server產生HTML== 後，再傳送到Client。由於 瀏覽器 是拿到渲染後的結果有利 SEO * Server-side Render(SSR): 伺服器渲染傳統開發的渲染方式 多頁式應用程式MPA (Multi-Page Application)靜態頁面檔案 透過後端的程式語言生成頁面html 優点：==SEO 搜索引擎的排名好==， 優点：减少了HTTP请求的次数，加速了页面初次渲染的速度 缺点：==效能差伺服器工作量大==有可能會掛掉 缺点：==使用者體驗差==，操作的畫面有好多個，當我們切換畫面時會有一瞬間的畫面空白 適合：主頁面 期中專題 SSR: 有很多頁的 PHP --> 路由是由後端控制。 --- * Client-side Render(CSR): 現在主流的渲染方式，Vue、React 或者是 Angular，預設上都是走 CSR 伺服器只是純粹做一些邏輯與資料處理 ，透過 Web API 將JSON資料傳給瀏覽器，Client在接受到 server 傳來的資料時==收到的幾乎是一張白紙，只有進入點（root）爬蟲爬不到==，==Client須要透過 JS 才會把資料渲染成 HTML==到畫面上。透過js產生頁面html 透過Web API拿到資料，這樣就算是一種==前後端分離==。 每一個人的==效能都是依據自己的電腦來決定==(現今個人電腦效能都非常強大)，所以對於==伺服器的負擔就會降低很多==，而且切換頁面上也會非常快速，這個過程中就會透過一個技術叫做 AJAX(Asynchronous JavaScript and XML) 來跟後端請求資料 or 資源 可能會有==首次進入網頁畫面時會稍微比較慢的問題發生==，畢竟 CSR 的模式下通常是使用了 JavaScript 來處理畫面的渲染，因此可能這個 JavaScript 的檔案就會特別大，變成使用者要先下載 JavaScript 的檔案，當==下載完成之後每一次切換上就會非常快速且流暢==，剛剛也有講到 CSR 大多都是在講 SPA，因此在 SPA 開發模式下，通常我們都一直固定在==同一個頁面，可能都是在 index.html== SPA藉由先傳送程式碼到Client來增加瀏覽網站的流暢度加速載入 Client Side Render(CSR): 客戶端渲染現在主流的渲染方式 單一頁面應用程式SPA (Single-page Application)動態頁面檔案 透過js產生頁面html 优点：速度快，前后端分离，方便于前后台各自更新维护。 優点：==使用者體驗好==，操作的畫面只會有一個 優点：==效能好、老闆省錢==，因為 CSR 的效能主要來自使用者身上，所以對於伺服器的負擔也會降低很多 缺点：==SEO搜尋引擎的排名差==，一張白紙爬蟲爬不到 缺点:增加了HTTP请求的次数，减缓了页面加载速度。 適合：廣告、個人化內容 期末專題 會先要到一個 html，這個 html 一點都不重要，他重點在準備一個 root dom，且載入 react js，從此就把 html dom 交給 react 了。 --> 這時候如果點擊了網頁上的連結，其實是 react 在幫我們置換內容，就沒有像後端發出其他 document 的請求了。 --> 路由是由前端(react)控制 在瀏覽器輸入 /about 按下 enter 或是重新整理 --> 他是會整個重刷網頁 --> 會把原本的網頁佔用的資源全部釋放 (react app 整個被釋放掉) --> 然後重新跟後端要一個新的 html 來 --> 既然往後端打了請求，這時候路由就是由後端控制 (nodejs) --- SSG(Static Site Generation)靜態頁面 畢竟 SPA 的出現就是為了解決使用者體驗的問題，拋棄它的話不就本末倒置了？因此就誕生了一些為了解決 SEO 問題的框架，例如：Nuxt.js(Vue)、Next.js(React) ，在編譯時這些框架(Nuxt.js、Next.js 等)，會先依據你的 AJAX 內容先跟遠端伺服器請求第一次的初始資料，然後再將這些資料真實的寫入到畫面上，進而生成 HTML 檔案 CSR、SSR最主要的差別，就在於有了資料後要在前端渲染還是在後端渲染。 [Client-side Render 和 SSR 的差別](https://ithelp.ithome.com.tw/articles/10227734) [如何加強網站的SEO - SSR與CSR篇](https://blog.yyisyou.tw/ff55dd91/) [[原來後端要知道] 什麼是前後端分離？ ](https://ithelp.ithome.com.tw/articles/10231011?sc=rss.qu) [React SSR | 從零開始實作 SSR — 基礎篇](https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/server-side-rendering-ssr-in-reactjs-part1-d2a11890abfc) [淺談 SPA、CSR、SSR、MPA、SSG 專有名詞](https://hsiangfeng.github.io/other/20210529/2519649612/)