首先，介紹一下 spa、seo、ssr 三者的區別
seo（search engine optimization）搜尋引擎優化，利用搜尋引擎的規則提高**在有關搜尋引擎內的自然排名。
我們之前說 spa 單頁面應用，通過 ajax 獲取資料，這就難保證我們的頁面能被搜尋引擎收到。並且有一些搜尋引擎不支援的 js 和通過 ajax 獲取的資料，那就更不用提 seo 了，為解決這個問題，ssr 登場了···
什麼是伺服器端渲染和客戶端渲染？
網際網路早期，使用者使用的瀏覽器瀏覽的都是一些沒有複雜邏輯的、簡單的頁面，這些頁面都是在後端將 html 拼接好的，然後返回給前端完整的 html 檔案，瀏覽器拿到這個 html 檔案之後就可以直接解析展示了，這也就是所謂的伺服器端渲染。而隨著前端頁面的複雜性提高，前端就不僅僅是普通的頁面展示了，可能是新增更多功能的元件，複雜性更大，另外，此時 ajax 的興起，使得頁面就開始崇拜前後端分離的開發模式，即後端不提供完整的 html 頁面，而是提供一些 api 使得前端可以獲取 json 資料，然後前端拿到 json 資料之後再在前端進行 html 頁面的拼接，然後展示在瀏覽器上，這就是所謂的客戶端渲染，這樣前端就可以專注 ui 的開發，後端專注與邏輯開發。
兩者本質的區別？
客戶端渲染和伺服器端渲染的最重要的區別就是究竟是誰來完成html檔案的完整拼接，如果是在伺服器端完成的，然後返回給客戶端，就是伺服器端渲染，而如果是前端做了更多的工作完成了html的拼接，則就是客戶端渲染。
伺服器端渲染的優缺點是？
優點：
前端耗時少。因為後端拼接完了html，瀏覽器只需要直接渲染出來。
有利於seo。因為在後端有完整的html頁面，所以爬蟲更容易爬取獲得資訊，更有利於seo。
無需占用客戶端資源。即解析模板的工作完全交由後端來做，客戶端只要解析標準的html頁面即可，這樣對於客戶端的資源占用更少，尤其是移動端，也可以更省電。
後端生成靜態化檔案。即生成快取片段，這樣就可以減少資料庫查詢浪費的時間了，且對於資料變化不大的頁面非常高效 。
缺點：
不利於前後端分離，開發效率低。使用伺服器端渲染，則無法進行分工合作，則對於前端複雜度高的專案，不利於專案高效開發。另外，如果是伺服器端渲染，則前端一般就是寫乙個靜態html檔案，然後後端再修改為模板，這樣是非常低效的，並且還常常需要前後端共同完成修改的動作； 或者是前端直接完成html模板，然後交由後端。另外，如果後端改了模板，前端還需要根據改動的模板再調節css，這樣使得前後端聯調的時間增加。
占用伺服器端資源。即伺服器端完成html模板的解析，如果請求較多，會對伺服器造成一定的訪問壓力。而如果使用前端渲染，就是把這些解析的壓力分攤了前端，而這裡確實完全交給了乙個伺服器。
優點：
前後端分離。前端專注於前端ui，後端專注於api開發，且前端有更多的選擇性，而不需要遵循後端特定的模板。
缺點：
前端響應較慢。如果是客戶端渲染，前端還要進行拼接字串的過程，需要耗費額外的時間，不如伺服器端渲染速度快。
使用伺服器端渲染還是客戶端渲染？
不談業務場景而盲目選擇使用何種渲染方式都是耍流氓。比如企業級**，主要功能是展示而沒有複雜的互動，並且需要良好的seo，則這時我們就需要使用伺服器端渲染；而類似後台管理頁面，互動性比較強，不需要seo的考慮，那麼就可以使用客戶端渲染。
另外，具體使用何種渲染方法並不是絕對的，比如現在一些**採用了首屏伺服器端渲染，即對於使用者最開始開啟的那個頁面採用的是伺服器端渲染，這樣就保證了渲染速度，而其他的頁面採用客戶端渲染，這樣就完成了前後端分離。
服務端渲染和客戶端渲染的區別
1 首先先來了解三個專業名詞 1 spa 單頁面應用 只有一張web頁面的應用，是一種從web伺服器載入的富客戶端，單頁面跳轉僅重新整理區域性資源，公共資源僅需載入一次，常用於pc端 購物等 優點 頁面之間切換快，減少了伺服器的壓力 2 seo 搜尋引擎優化，利用搜尋引擎的規則提高 在有關搜尋引擎的...
服務端渲染客戶端渲染的區別
首先，介紹一下 spa seo ssr 三者的區別 seo search engine optimization 搜尋引擎優化，利用搜尋引擎的規則提高 在有關搜尋引擎內的自然排名。我們之前說 spa 單頁面應用，通過 ajax 獲取資料，這就難保證我們的頁面能被搜尋引擎收到。並且有一些搜尋引擎不支援...
服務端渲染和客戶端渲染的對比
這裡結合art template模板引擎說明。首先了解下前端頁面中如何使用art template 1 script 標籤匯入包，當這個標籤匯入完畢後，在window全域性中就有了template 函式。2 建立乙個script標籤，內部是模板字串 3 var htmlstr template tm...