服務端渲染客戶端渲染的區別

首先，介紹一下 SPA、SEO、SSR 三者的區別css

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的拼接，則就是客戶端渲染。前端

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

優勢：ajax

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

缺點：數據庫

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

客戶端渲染的優缺點是？

優勢：json

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

缺點：後端

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

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

不談業務場景而盲目選擇使用何種渲染方式都是耍流氓。好比企業級網站，主要功能是展現而沒有複雜的交互，而且須要良好的SEO，則這時咱們就須要使用服務器端渲染；而相似後臺管理頁面，交互性比較強，不須要seo的考慮，那麼就可使用客戶端渲染。
另外，具體使用何種渲染方法並非絕對的，好比如今一些網站採用了首屏服務器端渲染，即對於用戶最開始打開的那個頁面採用的是服務器端渲染，這樣就保證了渲染速度，而其餘的頁面採用客戶端渲染，這樣就完成了先後端分離。api