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