服務(wù)器端渲染和客戶端渲染

$\color{red}{一邑彪、什么是服務(wù)器端渲染？}$

互聯(lián)網(wǎng)早期胧华，用戶使用瀏覽器瀏覽的都是一些沒有復(fù)雜邏輯的寄症、簡單的頁面，這些頁面都是在后端將html拼接好的撑柔，然后返回給前端完整的html文件瘸爽，瀏覽器拿到這個html文件之后就可以直接解析展示了，這就是所謂的服務(wù)器渲染了铅忿。

$\color{red}{二剪决、什么是客戶端渲染？}$

隨著前端頁面的復(fù)雜性提高檀训，前端就不僅僅是普通的頁面展示了柑潦，而可能添加了更多功能性的組件，復(fù)雜性更大峻凫，另外渗鬼，彼時ajax的興起，使得業(yè)界開始推崇前后端分離的開發(fā)模式荧琼，即后端不提供完成的html頁面譬胎，而是提供一些api使得前端可以獲取到j(luò)son數(shù)據(jù)，然后前端拿到j(luò)son數(shù)據(jù)之后再在前端進行html頁面的拼接命锄，然后展示在瀏覽器上堰乔，這就是所謂的客戶端渲染了。

前后端分離脐恩，可以讓前端更專注于UI的開發(fā)镐侯，后端專注于邏輯的開發(fā)。

$\color{red}{三驶冒、兩者的本質(zhì)區(qū)別是什么苟翻？}$

客戶端渲染和服務(wù)器端渲染的最重要的區(qū)別就是究竟是誰來完成html文件的完整拼接，如果是在服務(wù)器端完成骗污，然后返回給客戶端崇猫，就是服務(wù)器端渲染，而如果是前端做了更多的工作完成了html的拼接身堡，則就是客戶端渲染邓尤。

$\color{red}{四、服務(wù)器端渲染的優(yōu)缺點}$

1. 前端耗時少。因為后端拼接完了html汞扎，瀏覽器只需要直接渲染出來季稳。

2. 有利于SEO（搜索引擎優(yōu)化）。因為再后端有完整的html頁面澈魄，所以爬蟲更容易爬取獲得信息景鼠，更有利于SEO。

3. 無需占用客戶端資源痹扇。即解析模板的工作完全交由后端來做铛漓，客戶端只要解析標(biāo)準(zhǔn)的html頁面即可，這樣對于客戶端的資源占用更少鲫构，尤其是移動端浓恶，也可以更省電。

4. 后端生成靜態(tài)化文件结笨。即生成緩存片段包晰，這樣就可以減少數(shù)據(jù)庫查詢浪費的時間了，且對于數(shù)據(jù)變化不大的頁面非常高效炕吸。

1. 不利于前后端費力伐憾，開發(fā)效率低。使用服務(wù)器端渲染赫模，則無法進行分工合作树肃，則對于前段復(fù)雜度高的項目，不利于項目高效開發(fā)瀑罗。另外胸嘴，如果是服務(wù)器渲染，則前端一般就是寫一個靜態(tài)html文件斩祭，然后后端再修改為模板筛谚，這樣是非常低效的，并且還常常需要前后端共同完成修改的動作停忿；或者是前端直接完成html模板，然后交由后端蚊伞。另外席赂，如果后端改了模板，前端還需要根據(jù)改動的模板再調(diào)節(jié)css时迫，這樣使得前后端聯(lián)調(diào)的時間增加颅停。

2. 占用服務(wù)器端資源。即服務(wù)器端完成html模板的解析掠拳，如果請求較多癞揉，會對服務(wù)器造成一定的訪問壓力。而如果使用前端渲染，就是把這些解析的壓力分攤到了前端喊熟，而這里確實完全交給了一個服務(wù)器柏肪。

$\color{red}{五、客戶端渲染的優(yōu)缺點}$

$\color{green}{優(yōu)點：}$

1. 前后端分離芥牌。前端專注于前端UI烦味，后端專注于api開發(fā)，且前端又更多的選擇性壁拉，而不需要遵循后端特定的模板谬俄。

2. 體驗更好。比如弃理，我們將網(wǎng)站做成SPA（single page web app 單頁網(wǎng)頁應(yīng)用）或者部分內(nèi)容做成SPA溃论，這樣，尤其是移動端痘昌，可以使體驗更接近于原生app钥勋。

$\color{orange}{缺點：}$

1. 前端響應(yīng)較慢。如果是客戶端渲染控汉，前端還要進行拼接字符串的過程笔诵，需要耗費額外的時間，不如服務(wù)器端渲染速度快姑子。

2. 不利于SEO圈匆。目前比如百度烦绳、谷歌的爬蟲對于SPA都是不認的，只是記錄了一個頁面，所以SEO很差檐嚣。因為服務(wù)器端可能沒有保存完成的html，而是前端通過js進行dom的拼接蘸鲸，那么爬蟲無法爬取信息噪伊。除非搜索引擎的SEO可以增加對于js的爬取能力，這才能保證SEO磁携。

$\color{red}{六褒侧、使用服務(wù)器端渲染還是客戶端渲染？}$

不談業(yè)務(wù)場景而盲目選擇使用何種渲染方式都是耍流氓谊迄。比如企業(yè)級網(wǎng)站闷供，主要功能是展示而沒有復(fù)雜的交互，并且需要良好的SEO统诺，則這時我們就需要使用服務(wù)器端渲染歪脏；而類似后臺管理頁面，交互性比較強粮呢，不需要SEO的考慮婿失，那么久可以使用客戶端渲染钞艇。

另外，具體使用何種渲染方法并不是絕對的豪硅，比如現(xiàn)在一些網(wǎng)站采用了首屏服務(wù)器端渲染哩照，即對于用戶最開始打開的那個頁面采用的是服務(wù)器端渲染，這樣就保證了渲染速度舟误，而其他的頁面采用客戶端渲染葡秒，這樣就完成了前后端分離。

$\color{red}{七嵌溢、對于前后端分離眯牧，如何進行SEO優(yōu)化？}$

如果進行了前后端分離赖草，那么前端就是通過js來修改dom使得html拼接完成学少，然后再顯示，或者是使用SPA秧骑，這樣版确，SEO幾乎沒有。那么這種情況下如何做SEO優(yōu)化呢乎折？

我們可以自行提交sitemap绒疗，讓蜘蛛主動去爬取，但是遇到了sitemap中的url骂澄，達到指定頁面之后只有元js怎么辦呢吓蘑？這時我們可以使用<noscript>標(biāo)簽來進行簡單的優(yōu)化，比如打印出當(dāng)前頁面信息的一些關(guān)鍵的信息點坟冲，但是正常用戶并不需要這些磨镶，會造成額外的負擔(dān)，且前端可以判斷是否支持js健提，而后端不行琳猫，只好根據(jù)百度的spider做UA判斷，使用phantomjs或者nginx代理私痹，來對spider訪問的頁面進行特殊的處理脐嫂，達到被收錄的效果，但這種效果還是不好紊遵。雹锣。。

而目前的react和vue都提供了SSR癞蚕，即服務(wù)器端渲染，這也就是提供SEO不好的解決方式了辉哥。

$\color{red}{八桦山、究竟如何理解前后端分離攒射？}$

實際上，時至今日恒水，前后端分離一定是必然或者趨勢会放，因為早期在web1.0時代的網(wǎng)頁就是簡單的網(wǎng)頁，而如今的網(wǎng)頁越來越朝向app前進钉凌，而前后端分離就是實現(xiàn)app的必然的結(jié)果咧最。所以，我們可以認為html御雕、css矢沿、js組成了這個app，然后瀏覽器作為虛擬機來運行這些程序酸纲，即瀏覽器成為了app的運行環(huán)境捣鲸，成了客戶端，總的來說就是當(dāng)前的前端越來越朝向桌面應(yīng)用或者說是手機上的app發(fā)展了闽坡，而比如說電腦上的qq可以服務(wù)器端渲染嗎栽惶？肯定不能！所以前后端分離也就成了必然疾嗅。而我們目前接觸的前端工程化外厂、編譯（轉(zhuǎn)譯）、各種MVC\MVVM框架代承、依賴工具汁蝶、npm、bable次泽、webpace等等看似很新鮮穿仪、創(chuàng)新的東西實際上都是從桌面開發(fā)所形成的概念，只是近年來前端發(fā)展較快而借鑒過來的意荤，本質(zhì)上就是開源社區(qū)東拼西湊做出來的一個visual studio.

本文轉(zhuǎn)自https://www.cnblogs.com/zhuzhenwei918/p/8795945.html