從單頁應用(SPA)到伺服器渲染(SSR)
- 2021 年 2 月 5 日
- 筆記
從單頁應用(SPA)到伺服器渲染(SSR)
情景回顧
在學習Vue開發一個電商網站的管理後台時,使用到了一個組件 vue-quill-editor 主要是一個快捷的一個富文本編輯器
在使用這個組件的組件的時候看到了兩種的使用方式分別是SPA和SSR,技術不夠的我,只能面向百度編程🌍,那我們來看看是🐂是🐎吧！
本文分別從兩者的概念，主要的不同，優劣勢列舉等等去分析SPA和SSR。
SPA(Single Page Web Application)[單頁面應用程式]
概述
單頁Web應用就是只有一張Web頁面的應用，是載入單個HTML 頁面並在用戶與應用程式交互時動態更新該頁面的Web應用程式。也就是網頁上通過hash(#)的變化來實現推動介面變化,通過不同的組件切換,展示所對應的功能模組,也避免了頁面的重新載入
使用SPA的主流框架(MVVM:Model-View-ViewModel)
- AngularJS
- VueJS
- backone
- extjs
小知識點
<a href="target">go target</a>
<div id="target">i am target place</div>
<!--
點擊a鏈接,文檔會自動滾動到id為target的div區域中,運用在電商網站的樓層跳躍等實際當中
hash除了整個功能還有另一種含義:
指導瀏覽器行為但是不上傳伺服器
因為改變URL中的任何一個字元都會使瀏覽器重新去請求伺服器,導致很多已經載入過的資源都會重新請求
簡而言之:
[改變#後面的值不觸髮網頁重載，但會記錄到瀏覽器history中去。]
-->
SPA優點
- 很好的用戶操作，用戶不需要刷新頁面，整個交互都通過AJAX向伺服器發起請求,後通過伺服器返回的內容進行下一步的操作
- 適合用於前後端分類開發,服務端提供API地址,前端使用對應服務的API地址和對應的請求方式,拿到數據對客戶端進行渲染
SPA缺點
-
初次載入耗時多
- 在載入頁面顯示的時候載入打包文件，如果打包文件較大或者網速慢則用戶體驗不好，首屏時需要請求一次html，同時還要發送一次js請求，兩次請求回來了，首屏才會展示出來。
-
SEO(搜索引擎優化)不友好
- 因為搜索引擎只認識html里的內容，不認識js的內容，而單頁應用的內容都是靠js渲染生成出來的，搜索引擎不識別這部分內容，也就不會給一個好的排名，會導致單頁應用做出來的網頁在百度和Google上的排名差。使用單頁面應用將大大減少搜索引擎對網站的收錄。
實現一個簡單的基礎的SPA
主要通過 onhashchange 事件,所以我們主要監聽這個事件的觸發即可實現
下面是一個利用$.ajax實現的單頁面切換的例子：
window.onhashchange = function(){ //監聽hash值變化，實現頁面變換
var hash=window.location.hash;
changePage(hash);
}
function changePage(hash){
switch (hash) // 通過不同的hash地址路由到對應的頁面
{
case '#index':
url='partials/list.html';
break;
case '#newpage':
url='partials/newpage.html';
break;
case '#edit':
url='partials/edit.html';
break;
case '#view':
url='partials/view.html';
break;
}
$.ajax({ //根據hash值選擇頁面
type:'GET',
url:url,
success:function(data){
main.innerHTML=data; // 伺服器拿到響應數據再渲染
}
});
}
SSR
那在上面我們已經初步的了解了SPA的一些特別之處還有弊端
那我們再來看看SSR又能夠帶給我們怎麼樣的特點呢
SSR: Server-Side Render 服務端渲染
簡單的說就是: 服務端直接渲染出HTML字元串模板,瀏覽器可以直接通過解析該字元串模板顯示頁面,因此首屏的內容不在依賴JavaScript的渲染！！！
就好像我不需要再通過JS動態切換,而是服務端已經渲染好,我直接拿來就是可以使用
SSR優勢
- 首屏載入時間：因為是 HTML 直出，瀏覽器可以直接解析該字元串模版顯示頁面。
- SEO 友好：正是因為服務端渲染輸出到瀏覽器的是完備的 html 字元串，使得搜索引擎 能抓取到真實的內容，利於 SEO。
SSR缺點
-
雖然 SSR 能快速呈現頁面，但是在 UI 框架（比如 React）載入成功之前，頁面是沒法進行 UI 交互的。
-
TTFB (Time To First Byte)，即第一位元組時間會變長，因為 SSR 相對於 CSR 需要在服務端渲染出更多的 HTML 片段，因此載入時間會變長。
-
更多的伺服器端負載。由於 SSR 需要依賴 Node.js 服務渲染頁面，顯然會比僅僅提供靜態文件的 CSR 應用需要佔用更多伺服器 CPU 資源。以 React 為例，它的 renderToString() 方法是同步 CPU 綁定調用，這就意味著在它完成之前，伺服器是無法處理其他請求的。因此在高並發場景，需要準備相應的伺服器負載，並且做好快取策略。
總結
SPA:
優點:
- 頁面之間的切換快
- 一定程度上減少了後端伺服器的壓力
- 後端程式只需要提供API，不用管client是手機端還是PC端
缺點: - 首屏打開很慢，用戶首次打開要下載SPA框架及應用程式的程式碼，然後再渲染頁面
- 不利於SEO搜索引擎優化
SSR:
優點:
- 更快的響應時間，不用等待所有的js都下載完成，瀏覽器變成現實比較完整的頁面
- 更好的SEO，我們可以將SEO的關鍵數據直接在後台就渲染成html，從而保證搜索引擎的爬蟲能爬取到關鍵數據
缺點:
- 佔用更多的cpu和記憶體資源
- 一些常用的瀏覽器API無法使用，比如window，document，alert等，如果使用的話需要對運行環境加以判斷
- 開發調試會比較麻煩，對SPA的一些組件的生命周期的管理會變得複雜，只會執行ComponentMount之前的生命周期，第三庫使用受限，學習成本大。
為什麼SSR比SPA要快
服務端渲染路線
客戶端渲染路線
伺服器端渲染會先向後端請求數據，生成完整首屏HTML後返回給客戶端
客戶端渲染會等待JS下載，解析完之後再向伺服器請求數據，等待過程中是什麼也沒有的，所以會出現首屏白頁的情況
參考文檔
這些文章都是我在搜索資源時,感覺能夠很大程度幫助你理解一些概念，並通過簡單的言語能夠表達清晰,有需要的可以去查看
