說前端渲染和后端渲染前，渲染這個概念可以理解成：將html+css代碼進行解析，變成頁面上肉眼看見的圖形界面；其實渲染整個過程還是挺復雜，只要上述簡單理解即可。
要開始說前端渲染和后端渲染了，那就得從早期的網頁開發到目前流行的開發階段的演變過程說起，主要分為3個階段：
1. 后端時代（前后端不分離）
2. 前后端分離時代
3. 單頁面富應用時代
一. 后端時代
相信后的小伙伴還學過JSP呢，現在想想不知道多久沒碰這東西了。但在早期呢確實是用JSP做視圖的展示的，看下圖：
看完這個圖后，我再解釋一下。在早期頁面的生成，他是通過模板引擎來做到的，最典型的就是JSP了。頁面上的動態數據獲取是由服務端Java來實現的，最終在服務端渲染出了html，將其返回給頁面。因此這種方式也叫做后端渲染，html的最終生成是在服務端，瀏覽器只是拿到這個頁面而已。
那什么是后端路由呢？我們拿springmvc的流程來舉例子，后端路由相當是HandlerMapping處理器映射器，請求URL過來，由映射器進行正則匹配然后找到處理器
二.前后端分離時代
在后端時代還在用JSP時，那時候弊端太多了，典型的是耦合度太高，后端人員任務重，前后端人員溝通不方便...
前后端分離 出現后，前后端開發進行一定的解耦，僅僅是降低耦合度，並不是0耦合。那是因為出現Ajax技術，才實現了前后端分離的萌芽，畫個圖吧：
說這幅圖前，還普及一下一個知識，現在前后都分離常見有兩種模式：
1. 前端代碼和后端代碼都在同一個項目目錄里面，該項目部署到一台服務器上
2. 前端代碼和后端代碼是在不同的項目目錄里面，兩個項目是分別獨立運行的，互不相關，可部署在不同的服務器里。比如上面畫的這個圖就是屬於該情況。一般項目的前端代碼放在靜態資源服務器上，后端代碼放在API服務器或者說Web服務器上
說完這個小常識后，再來講下這幅圖。瀏覽器起初拿到的頁面是不完整的，是沒有數據渲染過的，因此還得借助ajax去請求api服務器獲取數據，最終渲染出真正的一個html頁面。瀏覽器ajax請求獲取數據后，並瀏覽器自身渲染的過程，就叫做前端渲染，因為這個工作呢不再是由服務端來做了，已經交付給瀏覽器負責，說白點即JavaSript渲染，而不再是Java了
三.單頁面富應用時代
單頁面富應用在vue中的體現可以說是淋漓盡致了。但不說vue啊，說什么是單頁面富應用？
單頁面富應用是說在靜態資源服務器上，只有一個html頁面，一套css代碼，一套JS代碼；瀏覽器去拿到上述的全部資源，進行部分展示和使用，如果通過請求具體的其他URL，在同一個頁面中進行另有一部分的展示和使用。
可能說得有點抽象，也不畫圖了，因為這個沒啥可畫的。還是細說一下。
1. 瀏覽器發送請求到靜態資源服務器
2. 靜態服務器返回一個html頁面，一套css代碼，一套JS代碼，即全部的資源
3. 瀏覽器拿到全部的資源后，並不是全部使用上的。比如訪問首頁，那就從全部的資源中展示首頁相關的html+css+js，當去訪問訂單，那就在同一個頁面里面不刷新的情況下，展示訂單相關的html+css+js
我們發現同一個頁面里面，沒有再次向靜態服務器發送頁面請求的情況下，做到了頁面的變化。這取決於兩點：
》開始時已經把全部資源獲取了
》前端路由。正是因為有前端路由，我們才可以通過觸發某個事件，在同一個頁面內進行局部的頁面變化。如果學過vue的話都知道，實際上是同一個頁面里單單切換了其中的組件
單頁面富應用有一個最大的好處是：只請求一次靜態服務器，不需要多次請求頁面了。不過對於前端人員來講呢，實際上真不是一個html頁面，本來寫多少頁面還是多少
做個總結：單頁面富應用 是在 前后端分離基本基礎上，加了前端路由這個東西。