服務端渲染和用戶端渲染差別？

首先，介紹一下 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的考慮，那麼就可以使用用戶端渲染。

另外，具體使用何種渲染方法并不是絕對的，比如現在一些網站采用了首屏伺服器端渲染，即對于使用者最開始打開的那個頁面采用的是伺服器端渲染，這樣就保證了渲染速度，而其他的頁面采用用戶端渲染，這樣就完成了前後端分離。