服務器端渲染和客戶端渲染

什麼是服務器端渲染和客戶端渲染？

   　互聯網早期，用戶使用瀏覽器瀏覽的都是一些沒有複雜邏輯的、簡單的頁面，這些頁面都是在後端將html拼接好的而後將之返回給前端完整的html文件，瀏覽器拿到這個html文件以後就能夠直接解析展現了，而這也就是所謂的服務器端渲染了。而隨着前端頁面的複雜性提升，前端就不只僅是普通的頁面展現了，而可能添加了更多功能性的組件，複雜性更大，另外，彼時ajax的興起，使得業界就開始推崇先後端分離的開發模式，即後端不提供完整的html頁面，而是提供一些api使得前端能夠獲取到json數據，而後前端拿到json數據以後再在前端進行html頁面的拼接，而後展現在瀏覽器上，這就是所謂的客戶端渲染了，這樣前端就能夠專一UI的開發，後端專一於邏輯的開發。

　　

二者本質的區別是什麼？

　　客戶端渲染和服務器端渲染的最重要的區別就是到底是誰來完成html文件的完整拼接，若是是在服務器端完成的，而後返回給客戶端，就是服務器端渲染，而若是是前端作了更多的工做完成了html的拼接，則就是客戶端渲染。

 

服務器端渲染的優缺點是怎樣的？

優勢：

1. 前端耗時少。由於後端拼接完了html，瀏覽器只須要直接渲染出來。
2. 有利於SEO。由於在後端有完整的html頁面，因此爬蟲更容易爬取得到信息，更有利於seo。
3. 無需佔用客戶端資源。即解析模板的工做徹底交由後端來作，客戶端只要解析標準的html頁面便可，這樣對於客戶端的資源佔用更少，尤爲是移動端，也能夠更省電。
4. 後端生成靜態化文件。即生成緩存片斷，這樣就能夠減小數據庫查詢浪費的時間了，且對於數據變化不大的頁面很是高效 。

缺點：

1. 不利於先後端分離，開發效率低。使用服務器端渲染，則沒法進行分工合做，則對於前端複雜度高的項目，不利於項目高效開發。另外，若是是服務器端渲染，則前端通常就是寫一個靜態html文件，而後後端再修改成模板，這樣是很是低效的，而且還經常須要先後端共同完成修改的動做； 或者是前端直接完成html模板，而後交由後端。另外，若是後端改了模板，前端還須要根據改動的模板再調節css，這樣使得先後端聯調的時間增長。
2. 佔用服務器端資源。即服務器端完成html模板的解析，若是請求較多，會對服務器形成必定的訪問壓力。而若是使用前端渲染，就是把這些解析的壓力分攤了前端，而這裏確實徹底交給了一個服務器。

 

客戶端渲染的優缺點是怎樣的？

優勢：　　

1. 先後端分離。前端專一於前端UI，後端專一於api開發，且前端有更多的選擇性，而不須要遵循後端特定的模板。
2. 體驗更好。好比，咱們將網站作成SPA或者部份內容作成SPA，這樣，尤爲是移動端，可使體驗更接近於原生app。

缺點：

1. 前端響應較慢。若是是客戶端渲染，前端還要進行拼接字符串的過程，須要耗費額外的時間，不如服務器端渲染速度快。
2. 不利於SEO。目前好比百度、谷歌的爬蟲對於SPA都是不認的，只是記錄了一個頁面，因此SEO不好。由於服務器端可能沒有保存完整的html，而是前端經過js進行dom的拼接，那麼爬蟲沒法爬取信息。 除非搜索引擎的seo能夠增長對於JavaScript的爬取能力，這才能保證seo。

 

 

使用服務器端渲染仍是客戶端渲染？

　　不談業務場景而盲目選擇使用何種渲染方式都是耍流氓。好比企業級網站，主要功能是展現而沒有複雜的交互，而且須要良好的SEO，則這時咱們就須要使用服務器端渲染；而相似後臺管理頁面，交互性比較強，不須要seo的考慮，那麼就可使用客戶端渲染。

　　另外，具體使用何種渲染方法並非絕對的，好比如今一些網站採用了首屏服務器端渲染，即對於用戶最開始打開的那個頁面採用的是服務器端渲染，這樣就保證了渲染速度，而其餘的頁面採用客戶端渲染，這樣就完成了先後端分離。

 

 

對於先後端分離，若是進行seo優化？

　　若是進行了先後端分離，那麼前端就是經過js來修改dom使得html拼接徹底，而後再顯示，或者是使用SPA，這樣，seo幾乎沒有。那麼這種狀況下如何作seo優化呢？

　　咱們能夠自行提交sitemap，讓蜘蛛主動去爬取，可是遇到了sitemap中的url，達到指定頁面以後只有元js怎麼辦呢？這是咱們可使用<noscript>標籤來進行簡單的優化，好比打印出當前頁面信息的一些關鍵的信息點，可是正經常使用戶並不須要這些，會形成額外的負擔，且前端能夠判斷是否支持JavaScript，然後段不行，只好根據百度的spider作UA判斷，使用phantomjs或者nginx代理，來對spider訪問的頁面進行特殊的處理，達到被收錄的效果。但這種效果仍是很差。。。

　　而目前的react和vue都提供了SSR，即服務器端渲染，這也就是提供seo很差的解決方式了。

 

 

 

究竟如何理解先後端分離？

　　實際上，時至今日，先後端分離必定是必然或者趨勢，由於早期在web1.0時代的網頁就是簡單的網頁，而現在的網頁愈來愈朝向app前進，而先後端分離就是實現app的必然的結果。因此，咱們能夠認爲html、css、JavaScript組成了這個app，而後瀏覽器做爲虛擬機來運行這些程序，即瀏覽器成爲了app的運行環境，成了客戶端，總的來講就是當前的前端愈來愈朝向桌面應用或者說是手機上的app發展了，而好比說電腦上的qq能夠服務器端渲染嗎？確定不能！因此先後端分離也就成了必然。而咱們目前接觸額前端工程化、編譯（轉譯）、各類MVC/MVVM框架、依賴工具、npm、bable、webpack等等看似很新鮮、創新的東西實際上都是傳動桌面開發所造成的概念，只是近年來前端發展較快而借鑑過來的，本質上就是開源社區東平西湊作出來的一個visual studio。