網際網路早期，使用者使用瀏覽器瀏覽的都是一些沒有複雜邏輯的、簡單的頁面，這些頁面都是在後端將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的考慮，那麼就可以使用客戶端渲染。
另外，具體使用何種渲染方法並不是絕對的，比如現在一些**採用了首屏伺服器端渲染，即對於使用者最開始開啟的那個頁面採用的是伺服器端渲染，這樣就保證了渲染速度，而其他的頁面採用客戶端渲染，這樣就完成了前後端分離。
如果進行了前後端分離，那麼前端就是通過js來修改dom使得html拼接完全，然後再顯示，或者是使用spa，這樣，seo幾乎沒有。那麼這種情況下如何做seo優化呢？
而目前的react和vue都提供了ssr，即伺服器端渲染，這也就是提供seo不好的解決方式了。
伺服器端渲染和客戶端渲染
不知什麼時候腦海裡突然冒出個問題，當輸入乙個 時，展現在我們眼前的資料從何而來？然後想呀想，查呀查,隨之引入了第乙個概念就是伺服器端渲染和客戶端渲染.1.什麼是伺服器端和客戶端？伺服器端 顧名思義是提供服務的，接收客戶端發出的請求，然後於response作為回應。客戶端 同理，客戶 是發請求的那一方...
React 伺服器端渲染和客戶端渲染效果對比
最近在學習 react 的服務端渲染，於是使用 express react 寫了乙個 demo，用於對比和客戶端渲染的差異。github 位址 先看一下效果吧 剛發布貌似 easy mock 官網就掛了，1 訪問 伺服器端渲染 online demo 2 我們可以看到，首屏資料很快的就顯示出來了，可...
React 伺服器端渲染和客戶端渲染效果對比
最近在學習 react 的服務端渲染，於是使用 express react 寫了乙個 demo，用於對比和客戶端渲染的差異。github 位址 先看一下效果吧 1 訪問 伺服器端渲染 online demo 2 我們可以看到，首屏資料很快的就顯示出來了，可是頁面的進度條卻還在載入中 因為客戶端 js...