現在前端開發一般都是前后端分離，mvvm和mvc的開發框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發，但是由于前后臺分離，給項目SEO帶來很大的不便，搜索引擎在檢索的時候是在網頁中爬取數據，由于單頁面應用讀取到的頁面是幾乎空白的，無法爬取到任何數據信息。
<!DOCTYPE html><html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>authorization_web</title> </head><body> <div id=app></div></body></html>
如上代碼，單頁面應用查看源代碼的時候如上所示，所以搜索引擎無法爬取到任何信息，搜索引擎會認為當前頁面為一個空頁面。為了解決SEO問題，推出了SSR服務端預渲染，以便提高對SEO優化。
什么是SSR
在認識SSR之前，首先對CSR與SSR之間做個對比。
首先看一下傳統的web開發，傳統的web開發是，客戶端向服務端發送請求，服務端查詢數據庫，拼接HTML字符串（模板），通過一系列的數據處理之后，把整理好的HTML返回給客戶端,瀏覽器相當于打開了一個頁面。這種比如我們經常聽說過的jsp,PHP,aspx也就是傳統的MVC的開發。
SPA應用，到了Vue、React，單頁面應用優秀的用戶體驗，逐漸成為了主流，頁面整體式javaScript渲染出來的，稱之為客戶端渲染CSR。SPA渲染過程。由客戶端訪問URL發送請求到服務端，返回HTML結構（但是SPA的返回的HTML結構是非常的小的，只有一個基本的結構，如第一段代碼所示）?？蛻舳私邮盏椒祷亟Y果之后，在客戶端開始渲染HTML，渲染時執行對應javaScript，最后渲染template，渲染完成之后，再次向服務端發送數據請求，注意這里時數據請求，服務端返回json格式數據?？蛻舳私邮諗祿?，然后完成最終渲染。
SPA雖然給服務器減輕了壓力，但是也是有缺點的：
為了解決如上兩個問題，出現了SSR解決方案，后端渲染出首屏的DOM結構返回，前端拿到內容帶上首屏，后續的頁面操作，再用單頁面路由和渲染，稱之為服務端渲染(SSR)。
SSR渲染流程是這樣的，客戶端發送URL請求到服務端，服務端讀取對應的url的模板信息，在服務端做出html和數據的渲染，渲染完成之后返回html結構，客戶端這時拿到的之后首屏頁面的html結構。所以用戶在瀏覽首屏的時候速度會很快，因為客戶端不需要再次發送ajax請求。并不是做了SSR我們的頁面就不屬于SPA應用了，它仍然是一個獨立的spa應用。
新聞熱點
疑難解答
圖片精選
