為什麽要做前後端分離？

前端後端有兩種協作方式，一種可以稱之為是服務器端渲染，一種是叫做前後端分離。

這兩種方式的差別是什麽呢？

第一種方式是服務器端渲染的方式，是指在服務器端就將網頁直接生成，瀏覽器這裏拿到的是一整個網頁，CSS和JS的部分是在瀏覽器端執行的，而網頁的內容部分，也就是數據，是由服務器端生成的。這叫做服務器端渲染。至於你是用NodeJS，還是用PHP，還是Python，還是Java，還是NodeJS+Java,都不重要。這是我一直都覺得，很多概念在混淆的原因，很多人都覺得說到前後端分離，就是JS和Java的分離，只要我用了JS，Java提供API，就是前後端分離了。是這樣麽？不是的。只要你的

第二種方式就是，前後端分離的方式，也是剛剛說到的。瀏覽器端先拿到Html，然後和後端通過Ajax接口獲取，或者是通過其他接口獲取，無所謂。所以兩種方式的區別關鍵，就在於是，Html是在哪兒生成的，瀏覽器和服務端傳遞的是什麽。在前後端分離的方式，瀏覽器和服務端傳遞的是數據，而在服務器端渲染的過程中，傳遞的是Html網頁。

弄清楚這兩點的差別，再來看兩種方式的好壞。

1 .數據量：前後端分離中傳遞數據，所以傳輸量會小。服務器端渲染，會傳輸更大的數據，而且，會有很多內容是重復的。

2 .體驗：前後端多了一個渲染數據的過程，服務器端省去了這個過程。這也是一直被提到的首屏渲染的問題。

3 .解耦：前後端分離中，傳輸的是數據，Model，數據怎麽展示，全部交給前端來處理，後端只負責提供數據。服務器端渲染中，傳輸的是Html，後端傳給前端的Model，通常是通過Hidden的Input來處理，或者是直接用模板技術生成（JSP，Velocity，freemak）等。數據和展現並未分離，在過去，這被稱之為套頁面。

4 .控制：網頁之間有各種跳轉交互，在前後端分離中，跳轉的頁面控制，全部是由前端來決定。跟後端完全沒有關系。在服務器端渲染的方式中，大部分是由後端來決定，少部分是由前端來決定。

5. SEO：前後端分離的方式，通常的載體是SPA，所以拿到的是沒有數據的空殼子，很多搜索引擎，不支持SPA方式的SEO. 而服務器端渲染的方式，因為生成的是網頁，所以對SEO支持的很好。 不要小巧這個環節，這是重多前臺網站放棄使用前後端分離方式的重要原因。

好了，以上5點，足以讓你對前後端分離和服務器渲染兩種方式有一些直觀的認知了。

再舉個例子：盒馬生鮮提供兩種方式，一種是前後端分離，一種是服務器端渲染。前後端分離是哪種方式呢？就是外賣或者是直接買生鮮，自己回家去做。服務器端渲染是哪種方式呢？就是直接在盒馬鮮生自己加工，直接吃，或者是帶回家吃。這裏的生鮮就是數據。做出來的食物就是Html網頁。接著看在什麽樣的場景下，應該使用前後端分離，很簡單。“不需要SEO的場景下，都應該使用前後端分離”。所以在後臺管理中，沒有任何理由不使用前後端分離，代指SPA。而在前臺頁面中，要認真考慮，不支持SEO的代價，不止幾百萬。前後需要用戶登錄的頁面，往往是不需要有

前後端分離 與 不分離