### 1. 何為渲染？ 頁面上的數據要發生更新，就是渲染。 * 這個工作放在服務器進行就是服務器渲染，放在瀏覽器進行就是瀏覽器渲染。 服務器端渲染，指的是后臺語言通過一些模板引擎生成 html。 瀏覽器端渲染，指的是用 js 去生成 html，前端做路由。 * 客戶端渲染和服務器端渲染的最重要的區別就是究竟是誰來完成html文件的完整拼接，如果是在服務器端完成的，然后返回給客戶端，就是服務器端渲染，而如果是前端做了更多的工作完成了html的拼接，則就是客戶端渲染。 2. 瀏覽器端渲染路線： 請求一個 html。 服務端返回一個 html。 瀏覽器下載 html 里面的 js/css 文件。 等待 js 文件下載完成。 等待 js 加載并初始化完成。 由 js 代碼向后端請求數據（ajax/fetch）。 等待后端數據返回。 客戶端從無到完整地，把數據渲染為響應頁面。? 3. 服務端渲染路線： 請求一個 html。 服務端請求數據 服務器初始渲染。 服務端返回已經有正確內容的頁面。 客戶端請求 js/css 文件。 等待 js 文件下載完成。 等待 js 加載并初始化完成。 客戶端把剩下一部分渲染完成。 ##### 服務器端渲染的優缺點是？ **優點：** 1. 前端耗時少。因為后端拼接完了html，瀏覽器只需要直接渲染出來。 2. 有利于SEO。因為在后端有完整的html頁面，所以爬蟲更容易爬取獲得信息，更有利于seo。 3. 無需占用客戶端資源。即解析模板的工作完全交由后端來做，客戶端只要解析標準的html頁面即可，這樣對于客戶端的資源占用更少，尤其是移動端，也可以更省電。 4. 后端生成靜態化文件。即生成緩存片段，這樣就可以減少數據庫查詢浪費的時間了，且對于數據變化不大的頁面非常高效 。 **缺點：** 1. 不利于前后端分離，開發效率低。使用服務器端渲染，則無法進行分工合作，則對于前端復雜度高的項目，不利于項目高效開發。另外，如果是服務器端渲染，則前端一般就是寫一個靜態html文件，然后后端再修改為模板，這樣是非常低效的，并且還常常需要前后端共同完成修改的動作； 或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端還需要根據改動的模板再調節css，這樣使得前后端聯調的時間增加。 2. 占用服務器端資源。即服務器端完成html模板的解析，如果請求較多，會對服務器造成一定的訪問壓力。而如果使用前端渲染，就是把這些解析的壓力分攤了前端，而這里確實完全交給了一個服務器。 ### 客戶端渲染的優缺點是？ **優點：** 1. 前后端分離。前端專注于前端UI，后端專注于api開發，且前端有更多的選擇性，而不需要遵循后端特定的模板。 2. 體驗更好。比如，我們將網站做成SPA或者部分內容做成SPA，這樣，尤其是移動端，可以使體驗更接近于原生app。 **缺點：** 1. 前端響應較慢。如果是客戶端渲染，前端還要進行拼接字符串的過程，需要耗費額外的時間，不如服務器端渲染速度快。 2. 不利于SEO。目前比如百度、谷歌的爬蟲對于SPA都是不認的，只是記錄了一個頁面，所以SEO很差。因為服務器端可能沒有保存完整的html，而是前端通過js進行dom的拼接，那么爬蟲無法爬取信息。 除非搜索引擎的seo可以增加對于JavaScript的爬取能力，這才能保證seo。 ##### 使用服務器端渲染還是客戶端渲染？ 不談業務場景而盲目選擇使用何種渲染方式都是耍流氓。比如企業級網站，主要功能是展示而沒有復雜的交互，并且需要良好的SEO，則這時我們就需要使用服務器端渲染；而類似后臺管理頁面，交互性比較強，不需要seo的考慮，那么就可以使用客戶端渲染。 另外，具體使用何種渲染方法并不是絕對的，比如現在一些網站采用了首屏服務器端渲染，即對于用戶最開始打開的那個頁面采用的是服務器端渲染，這樣就保證了渲染速度，而其他的頁面采用客戶端渲染，這樣就完成了前后端分離。