好不容易搞利索了一個叫做 ajax 的東西, 終于知道了什么叫做請求, 什么叫做接口,?get?和?post?有啥區(qū)別, 咋又來了一個服務(wù)端渲染和前后端分離呢 ？?

接下來, 帶你分清 服務(wù)端渲染 和 前后端分離！

渲染

什么是渲染呢 ?

其實(shí)很簡單, 就是把數(shù)據(jù)反應(yīng)在頁面上，說白了, 就是利用 js 的語法, 把某些數(shù)據(jù)組裝成 html 結(jié)構(gòu)的樣子, 放在頁面上展示。

舉個例子 :

1.?準(zhǔn)備一段 html 結(jié)構(gòu)

2.?準(zhǔn)備一段數(shù)據(jù)

3.?進(jìn)行渲染

4.?打開瀏覽器

好了, 渲染完畢, 我們把一段 js 內(nèi)的數(shù)據(jù)展示在了頁面上。

當(dāng)然了, 這只是一段非常非常簡單的渲染，我們再來看一個稍微復(fù)雜一點(diǎn)的：

1.?準(zhǔn)備一段 html 結(jié)構(gòu)

2.?準(zhǔn)備一段數(shù)據(jù)

3.?開始渲染

4.?打開瀏覽器

我們已經(jīng)把這個數(shù)組數(shù)據(jù)渲染在頁面上了，渲染的方式多種多樣, 不管你用什么方式, 只要是把數(shù)據(jù)在頁面上展示出來, 這個行為就叫做渲染。

?瀏覽器和服務(wù)器

接下來, 咱們就要聊一下瀏覽器和服務(wù)器的問題了。

我們都知道瀏覽器也就是我們通常說的前端, 任務(wù)就是展示內(nèi)容，服務(wù)器也就是我們通常說的后端, 任務(wù)就是準(zhǔn)備數(shù)據(jù), 處理數(shù)據(jù)。

還有一個叫做數(shù)據(jù)庫的東西, 用來存儲數(shù)據(jù)。這個時候, 我們先暫時忽略一下過程, 看一下結(jié)果。

?這是我們從數(shù)據(jù)源頭到結(jié)果的展示, 在這里我們忽略了過程，在這個過程里面, 我們有一個不可避免的問題, 就是瀏覽器, 不能直接從數(shù)據(jù)庫中拿數(shù)據(jù)。所以, 在這個模型中, 我們還需要一個服務(wù)器的存儲 。

• 前端不能操作數(shù)據(jù)庫, 但是服務(wù)端可以

• 所以前端想要什么數(shù)據(jù), 就告訴后端

• 后端去數(shù)據(jù)庫中找到對應(yīng)的數(shù)據(jù)

• 拿到數(shù)據(jù)以后進(jìn)行整合和處理

• 處理完畢后返回給前端

• 這個時候前端就可以把數(shù)據(jù)渲染在頁面上

看到這里, 我們可能會回憶起一點(diǎn)什么，這不就是我之前學(xué)習(xí)的 ajax 嗎？

打開頁面, 通過 ajax 發(fā)送請求到服務(wù)器獲取數(shù)據(jù)，然后將響應(yīng)體內(nèi)容渲染在頁面上

能想到這里, 說明你之前的內(nèi)容掌握的很好，接下來咱們就開始進(jìn)入正題。

?前后端分離和服務(wù)端渲染

頁面也是服務(wù)器給的。

眾所周知, 我們的頁面, 也就是我們打開的 html 文件也是存儲在服務(wù)器上面。

只不過我們在地址欄輸入了地址以后, 會根據(jù)對應(yīng)的規(guī)則找到對應(yīng)的服務(wù)器，拿到這個 html 文件, 被瀏覽器解析顯示了出來。

不管 html 文件, 你所有的 圖片, 視音頻, css, html, js 文件其實(shí)都是存儲在服務(wù)器上面的。

?前后端分離

其實(shí)就是前端干前端的事情, 后端干后端的事情，也就是我們以前的情況。

• 當(dāng)你在地址欄輸入地址的時候

• 服務(wù)器返回一個文件給你

• 當(dāng)這個文件運(yùn)行的時候, 通過執(zhí)行內(nèi)部的 js 代碼

• 發(fā)送一個 ajax 請求

• 拿到對應(yīng)返回的數(shù)據(jù)

• 把數(shù)據(jù)渲染在頁面上

?服務(wù)端渲染

其實(shí)就是在服務(wù)端把所有的事情做完, 直接把結(jié)果給到前端，剛才我們說了, 頁面等所有文件其實(shí)都是存儲在服務(wù)器上面的。

• 當(dāng)你在地址欄輸入地址以后

• 服務(wù)器會找到你需要的 html 文件, 但是先不給你

• 然后去找到當(dāng)前這個文件內(nèi)所需要的數(shù)據(jù)內(nèi)容

• 然后, 把數(shù)據(jù)內(nèi)容組裝成一個 html 結(jié)構(gòu)插入到頁面內(nèi)

• 然后把插入好數(shù)據(jù)的頁面直接返回給你

?區(qū)別

1.?數(shù)據(jù)渲染

前后端分離 : 后端把數(shù)據(jù)返回給客戶端, 在客戶端運(yùn)算渲染出來

服務(wù)端渲染 : 后端把數(shù)據(jù)直接渲染在了 html 文件上, 把渲染好的文件給你

2.?源文件

前后端分離 : 你得到的 html 源文件是沒有對應(yīng)的渲染內(nèi)容的, 需要依靠執(zhí)行 js 渲染

服務(wù)端渲染 : 你得到的 html 源文件就是所有數(shù)據(jù)都書寫好的文件

3.?頁面加載速度

前后端分離 : 得到 html 頁面以后, 還需要等待 ajax 請求數(shù)據(jù)在進(jìn)行渲染

服務(wù)端渲染 : 得到的 html 就是完整的最終頁面, 直接

展示即可

4.?SEO

前后端分離 : 因?yàn)轫撁鏇]有結(jié)構(gòu), 所以不利于搜索引擎抓取

服務(wù)端渲染 : 得到的 html 就是完整內(nèi)容, 搜索引擎可以抓取到所有內(nèi)容

舉個例子：你家里剛剛裝修好, 需要買一張床

前后端分離 ( 你: 前端, 銷售商: 后端, 廠家: 數(shù)據(jù)庫 )

• 你給銷售商說好, 你要什么樣子的床, 什么顏色等等內(nèi)容

• 銷售商就去廠家定制所有的材料

• 然后銷售商就拿著原材料, 送到你家就好了

• 這個時候你需要自己去組裝成一個床

• 這時你就會發(fā)現(xiàn), 你想睡在這個床上, 那么還需要一點(diǎn)時間

服務(wù)端渲染 ( 你: 前端, 銷售商: 后端, 廠家: 數(shù)據(jù)庫 )

• 你給銷售商說好, 你要什么樣子的床, 什么顏色等等內(nèi)容

• 銷售商就去廠家定制所有的材料

• 然后呢, 銷售商會在他那里把床組裝好, 直接給你搬過來

• 到你家以后呢, 把房頂掀起來, 床放進(jìn)去, 齊活

• 這時你是完全可以直接躺在床上睡覺的

?總結(jié)

●?前端的工作就是?展示數(shù)據(jù)

●?后端的工作就是?處理數(shù)據(jù)

前后端分離 :?前端負(fù)責(zé)數(shù)據(jù)渲染, 后端負(fù)責(zé)提供數(shù)據(jù), 自己干自己的事情