首先，介紹一下 SPA、SEO、SSR 三者的區(qū)別
-
SPA（single page application） 單頁面應(yīng)用，是前后端分離時提出的一種解決方案。
優(yōu)點：頁面之間切換快；減少了服務(wù)器壓力；
缺點：首屏打開速度慢，不利于 SEO 搜索引擎優(yōu)。 -
SEO（search engine optimization）搜索引擎優(yōu)化，利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名。
我們之前說 SPA 單頁面應(yīng)用，通過 ajax 獲取數(shù)據(jù)，這就難保證我們的頁面能被搜索引擎收到。并且有一些搜索引擎不支持的 js 和通過 ajax 獲取的數(shù)據(jù)，那就更不用提 SEO 了，為解決這個問題，SSR 登場了··· -
SSR （server side rendering）服務(wù)端渲染，SSR 的出現(xiàn)一定程度上解決了 SPA 首屏慢的問題，又極大的減少了普通 SPA 對于 SEO 的不利影響。
優(yōu)點：
更快的響應(yīng)時間，不用等待所有 js 都下載完成，瀏覽器便能顯示比較完整的頁面；
更好的 SSR，我們可以將 SEO 關(guān)鍵信息直接在后臺就渲染成 html，從而保證搜索引擎都能爬取到關(guān)鍵數(shù)據(jù)。
缺點：
占用更多的 CUP 和內(nèi)存資源；
一些常用的瀏覽器的 api 可能無法正常使用，比如 window，document，alert等，如果使用的話需要對運行環(huán)境加以判斷。
什么是服務(wù)器端渲染和客戶端渲染？
互聯(lián)網(wǎng)早期，用戶使用的瀏覽器瀏覽的都是一些沒有復(fù)雜邏輯的、簡單的頁面，這些頁面都是在后端將 html 拼接好的，然后返回給前端完整的 html 文件，瀏覽器拿到這個 html 文件之后就可以直接解析展示了，這也就是所謂的服務(wù)器端渲染。而隨著前端頁面的復(fù)雜性提高，前端就不僅僅是普通的頁面展示了，可能是添加更多功能的組件，復(fù)雜性更大，另外，此時 ajax 的興起，使得頁面就開始崇拜前后端分離的開發(fā)模式，即后端不提供完整的 html 頁面，而是提供一些 api 使得前端可以獲取 json 數(shù)據(jù)，然后前端拿到 json 數(shù)據(jù)之后再在前端進行 html 頁面的拼接，然后展示在瀏覽器上，這就是所謂的客戶端渲染，這樣前端就可以專注 UI 的開發(fā)，后端專注與邏輯開發(fā)。
兩者本質(zhì)的區(qū)別？
客戶端渲染和服務(wù)器端渲染的最重要的區(qū)別就是究竟是誰來完成html文件的完整拼接，如果是在服務(wù)器端完成的，然后返回給客戶端，就是服務(wù)器端渲染，而如果是前端做了更多的工作完成了html的拼接，則就是客戶端渲染。
服務(wù)器端渲染的優(yōu)缺點是？
優(yōu)點：
- 前端耗時少。因為后端拼接完了html，瀏覽器只需要直接渲染出來。
- 有利于SEO。因為在后端有完整的html頁面，所以爬蟲更容易爬取獲得信息，更有利于seo。
- 無需占用客戶端資源。即解析模板的工作完全交由后端來做，客戶端只要解析標準的html頁面即可，這樣對于客戶端的資源占用更少，尤其是移動端，也可以更省電。
- 后端生成靜態(tài)化文件。即生成緩存片段，這樣就可以減少數(shù)據(jù)庫查詢浪費的時間了，且對于數(shù)據(jù)變化不大的頁面非常高效 。
缺點：
- 不利于前后端分離，開發(fā)效率低。使用服務(wù)器端渲染，則無法進行分工合作，則對于前端復(fù)雜度高的項目，不利于項目高效開發(fā)。另外，如果是服務(wù)器端渲染，則前端一般就是寫一個靜態(tài)html文件，然后后端再修改為模板，這樣是非常低效的，并且還常常需要前后端共同完成修改的動作； 或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端還需要根據(jù)改動的模板再調(diào)節(jié)css，這樣使得前后端聯(lián)調(diào)的時間增加。
- 占用服務(wù)器端資源。即服務(wù)器端完成html模板的解析，如果請求較多，會對服務(wù)器造成一定的訪問壓力。而如果使用前端渲染，就是把這些解析的壓力分攤了前端，而這里確實完全交給了一個服務(wù)器。
客戶端渲染的優(yōu)缺點是？
優(yōu)點：
- 前后端分離。前端專注于前端UI，后端專注于api開發(fā)，且前端有更多的選擇性，而不需要遵循后端特定的模板。
- 體驗更好。比如，我們將網(wǎng)站做成SPA或者部分內(nèi)容做成SPA，這樣，尤其是移動端，可以使體驗更接近于原生app。
缺點：
- 前端響應(yīng)較慢。如果是客戶端渲染，前端還要進行拼接字符串的過程，需要耗費額外的時間，不如服務(wù)器端渲染速度快。
- 不利于SEO。目前比如百度、谷歌的爬蟲對于SPA都是不認的，只是記錄了一個頁面，所以SEO很差。因為服務(wù)器端可能沒有保存完整的html，而是前端通過js進行dom的拼接，那么爬蟲無法爬取信息。 除非搜索引擎的seo可以增加對于JavaScript的爬取能力，這才能保證seo。
使用服務(wù)器端渲染還是客戶端渲染？
不談業(yè)務(wù)場景而盲目選擇使用何種渲染方式都是耍流氓。比如企業(yè)級網(wǎng)站，主要功能是展示而沒有復(fù)雜的交互，并且需要良好的SEO，則這時我們就需要使用服務(wù)器端渲染；而類似后臺管理頁面，交互性比較強，不需要seo的考慮，那么就可以使用客戶端渲染。
另外，具體使用何種渲染方法并不是絕對的，比如現(xiàn)在一些網(wǎng)站采用了首屏服務(wù)器端渲染，即對于用戶最開始打開的那個頁面采用的是服務(wù)器端渲染，這樣就保證了渲染速度，而其他的頁面采用客戶端渲染，這樣就完成了前后端分離。
