SPA單頁面Web應用
SPA(Single page web application) 單頁面Web應用
Web不再是一張張頁面,而是一個整體的應用,一個由路由系統,數據系統,頁面(組件)系統等等,組成的應用程序, 讓用戶不需要每次與服務器進行頁面刷新來獲得新的內容, 從而提供了更快,跟流暢的用戶體驗, 在SPA中, 所有的交互都在一個單獨的頁面中進行處理, 通常時index.html, 通過JavaScript和Ajax技術動態地加載內容和更新頁面,同時使用前端路由管理頁面的不同狀態和頁面之間的跳轉。
SPA應用廣泛用于對SEO要求不高的場景
SEO搜索引擎優化
SEO (Search Engine Optimization) 搜索引擎優化
通過各種技術(手段)來確保, 我們的Web內容被搜索引擎最大化收錄,最大化提高權重,最終帶來更多流量, 常見的SEO技術包括, 優化網站的關鍵詞, 標題, 和描述, 改善網站的內部連接結構, 增加網站的頁面訪問速度, 提高網站的用戶體驗, 建立高質量的外部鏈接等
SSR服務端渲染
SSR (Server Side Render) 服務端渲染, 即網頁是通過服務端渲染生成后輸出給客戶端
在SSR中, 前端分為兩部分: 前端客戶端, 前端服務端
????????????????前端服務端, 用于發送AJAX, 獲得數據
????????????????前端客戶端, 用于將AJAX數據和頁面進行渲染, 渲染成HTML頁面, 并相應給調用程序(瀏覽器,爬蟲)
如果爬蟲獲得html頁面, 就可以啟動處理程序, 處理頁面內容, 做種完成SEO操作
SPA和SSR對比
SPA單頁應用程序 | SSR服務器端渲染 | |
---|---|---|
優勢 | 1.頁面內容在客戶端渲染 2. 只關注View層,與后臺耦合度低,前后端分離 3.減輕后臺渲染畫面的壓力 | 1.更好的SEO,搜索引擎工具可以直接查看完全渲染的畫面 2.更快的內容到達時間 (time-to-content),用戶能更快的看到完整渲染的畫面 |
劣勢 | 1.首屏加載緩慢 2.SEO(搜索引擎優化)不友好 | 1.更多的服務器端負載 2.涉及構建設置和部署的更多要求,需要用Node.js渲染 3.開發條件有限制,一些生命周期將失效 4.一些常用的瀏覽器API無法使用 |