關(guān)于前后端同構(gòu)的新一輪探討

首先

本文是我在研究使用nuxt進行同構(gòu)的時候姚建，讀了拂曉風起寫的一篇叫做# 《關(guān)于前后端同構(gòu)，我的一點思路和心得（vue吱殉、nodejs掸冤、react、模版）》之后有感而發(fā)寫的友雳，其中借鑒了很多作者的觀點

前后端的同構(gòu)與分離

說起前后端同構(gòu)稿湿，資深一點兒的前端或后端開發(fā)者都不會陌生；
下面我們就是說一下前后端同構(gòu)與分離沥阱，這對cp的故事：
1缎罢、web開發(fā)的歷程也是分分合合很有趣的，早些年代使用php .asp的時候考杉，一切都是服務(wù)端渲染的；
2舰始、再后來由于業(yè)務(wù)復雜程度提高崇棠，服務(wù)器的負載增加，為了節(jié)省服務(wù)器的資源丸卷，更大限度的利用客戶端的緩存枕稀，又出現(xiàn)了前后端分離的模式，從而有了專業(yè)的前端開發(fā)和后端開發(fā)，此時web的特點是萎坷，js凹联、css和html放到靜態(tài)目錄，也可以通過cdn擴散哆档，并以ajax的方式去后臺獲取數(shù)據(jù)蔽挠、在前端進行dom組裝，這種開發(fā)方式沿用至今瓜浸、這是一個好的工作模式澳淑，專業(yè)的人做專業(yè)的事，沿用至今插佛，確實可以提高工作效率杠巡；
3、再而雇寇，由于nodejs的興起氢拥，前端的js開發(fā)者蠢蠢欲動，嘗試吞并web接入這個后臺的前沿地盤锨侯、把后臺推到更后兄一；大概2014年后，又出現(xiàn)了很多nodejs直出的方案识腿，把頁面數(shù)據(jù)都一次在HTML的請求中返回出革，無需瀏覽器端再發(fā)起ajax獲取數(shù)據(jù)，而且服務(wù)器端把DOM結(jié)構(gòu)都渲染好渡讼，瀏覽器按trunk直接做圖形渲染即可骂束。不得不說，這個方案帶來了很多好處：首屏速度更快成箫，瀏覽器更省電展箱。當然，隨之而來的蹬昌，就是更復雜的工作模式混驰，js開發(fā)者需要做服務(wù)器端的邏輯，甚至一些代碼需要同時用在瀏覽器和nodejs上皂贩。
4栖榨、針對上面的問題，同構(gòu)的探討就開始了......

關(guān)于同構(gòu)的探討

一般來講明刷，同構(gòu)的目的有兩個：
1婴栽、解決SEO；
2辈末、提高用戶體驗愚争、提高團隊的工作效率映皆；
如果你的項目尋求以上兩點目的并符合一下的幾種情況就可以考慮同構(gòu)了:

一、單頁應(yīng)用

二轰枝、多頁面純數(shù)據(jù)展示捅彻，每一頁都比較簡單，沒有分屏的必要

三鞍陨、多頁面而且每一頁不是那么簡單步淹，首屏和次屏有一些HTML片段（模版）需要復用

四、還是多頁面湾戳，瀏覽器端沒有模版拼裝的需求贤旷，第三種情況的變種

矛盾與統(tǒng)一

那么我這里要總結(jié)一下，就是前后端的同構(gòu)與分離是否真的矛盾砾脑，這個事情并不絕對幼驶；我這里不會說什么根據(jù)自己公司的業(yè)務(wù)來確定就是最好的這種話：
1、前后端的分離和服務(wù)端的渲染并沒有發(fā)生沖突韧衣；數(shù)據(jù)接口 api 依舊是后端提供盅藻，前后端分離是我們直接調(diào)用接口獲取數(shù)據(jù)、把數(shù)據(jù)動態(tài)展示在頁面上畅铭，而服務(wù)端渲染是在你從api獲取數(shù)據(jù)之后然后渲染出view氏淑，也就是我們常說的nodejs直出方案；我們可以把前端 node 后端看成三個獨立的個體：

我們之前認為的前后端分離

image.png

加入服務(wù)端渲染之后