## 一、概述 ### **CSR** CSR是Client Side Render簡稱；頁面上的內容是我們加載的js文件渲染出來的，js文件運行在客戶端瀏覽器上面； ### **SSR** 服務端渲染（Server-Side Rendering），是指由**服務側**完成頁面的 HTML 結構拼接的頁面處理技術，發送到瀏覽器，然后為其綁定狀態與事件，成為完全可交互頁面的過程； ## 二、SSR vs CSR CSR和SSR最大的區別在于前者的頁面渲染是JS負責進行的，而后者是服務器端直接返回HTML讓瀏覽器直接渲染； 現在的前端技術，大量使用的是JS在客戶端渲染； ### **傳統CSR的弊端** * 由于頁面顯示過程要進行JS文件拉取和前端框架代碼執行，首屏加載時間會比較慢。 * 對于SEO(Search Engine Optimazition,即搜索引擎優化)，完全無能為力，因為搜索引擎爬蟲只認識html結構的內容，而不能識別JS代碼內容； SSR的出現，就是為了解決這些傳統CSR的弊端； ### **SSR的弊端** * 多維護一個服務層：需要一個node server（express，koa...），這就不可避免地加大了性能、運維等挑戰； * 代碼兼容性：瀏覽器里的好多代碼在SSR過程中是會報錯的，所以你得花很多精力去處理其中的兼容性； * 技術限制：雖然現在Vue、React 等流行框架都出臺了相應的SSR解決方案，但如果自行實現，技術上要求不低； >[danger] SSR很有用不錯，但也不可避免地加大了很多開發和維護的成本，對于不是大神級別的前端工程師和小公司來說是很大的挑戰；