服務(wù)器端渲染是什么【W(wǎng)eb前端培訓(xùn)】

　　Vue進(jìn)行服務(wù)器端渲染時(shí)，需要利用Node.js搭建一個(gè)服務(wù)器，并添加服務(wù)器端渲染的代碼邏輯。使用webpack-dev-middleware中間件對(duì)更改的文件進(jìn)行監(jiān)控，使用webpack-hot-middleware中間件進(jìn)行頁(yè)面的熱更新，使用vue-server-renderer插件來(lái)渲染服務(wù)器端打包的bundle文件到客戶端。

　　服務(wù)器端渲染具有哪些優(yōu)點(diǎn)?

　　如果網(wǎng)站對(duì)SEO(搜索引擎優(yōu)化)要求比較高，頁(yè)面又是通過(guò)異步來(lái)獲取內(nèi)容，則需要使用服務(wù)器渲染來(lái)解決此問(wèn)題。

　　服務(wù)器端渲染相對(duì)于傳統(tǒng)的SPA(單頁(yè)面應(yīng)用)來(lái)說(shuō)，主要有以下優(yōu)勢(shì)。

　　(1)利于SEO

　　Vue SSR利用Node.js搭建頁(yè)面渲染服務(wù)，在服務(wù)端完成頁(yè)面的渲染(把以前需要在客戶端完成的頁(yè)面渲染放在服務(wù)器端來(lái)完成)，便于輸出SEO更友好的頁(yè)面。

　　(2)首屏渲染速度快

　　在前后端分離的項(xiàng)目中，前端部分需要先加載靜態(tài)資源，再采用異步的方式去獲取數(shù)據(jù)，最后來(lái)渲染頁(yè)面。其中，在獲取靜態(tài)資源和異步獲取數(shù)據(jù)階段，頁(yè)面上是沒(méi)有數(shù)據(jù)的，這將會(huì)影響首屏的渲染速度和用戶體驗(yàn)。

　　而使用服務(wù)器端渲染的項(xiàng)目，特別是對(duì)于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備來(lái)說(shuō)，無(wú)須等待所有的JavaScript都完成下載并執(zhí)行，才會(huì)顯示服務(wù)器渲染的標(biāo)記，這使得用戶將會(huì)更快速地看到完整渲染的頁(yè)面，將會(huì)大大提升用戶體驗(yàn)。

　　服務(wù)器端渲染的不足是什么?

　　雖然服務(wù)器端渲染有首屏加載速度快和有利于SEO的優(yōu)點(diǎn)，但是在使用服務(wù)器端渲染的時(shí)候，還需要注意以下兩點(diǎn)事項(xiàng)。

　　(1)服務(wù)器端壓力增加

　　服務(wù)器端渲染需要在Node.js中渲染完整的應(yīng)用程序，這會(huì)大量占用CPU資源。如果在高流量的環(huán)境下使用，建議利用緩存來(lái)降低服務(wù)器負(fù)載。

　　(2)涉及構(gòu)建設(shè)置和部署的要求

　　單頁(yè)面應(yīng)用程序可以部署在任何靜態(tài)文件服務(wù)器上，而服務(wù)器端渲染應(yīng)用程序，需要運(yùn)行在Node.js服務(wù)器環(huán)境。