本文小編為大家詳細(xì)介紹“vue服務(wù)端渲染和客戶端渲染的區(qū)別有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue服務(wù)端渲染和客戶端渲染的區(qū)別有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供息烽網(wǎng)站建設(shè)、息烽做網(wǎng)站、息烽網(wǎng)站設(shè)計(jì)、息烽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、息烽企業(yè)網(wǎng)站模板建站服務(wù)，十載息烽做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

區(qū)別：1、服務(wù)端渲染是在服務(wù)端生成DOM樹，客戶端渲染是在客戶端生成DOM樹；2、服務(wù)端渲染會(huì)加快頁面的響應(yīng)速度，客戶端渲染頁面的響應(yīng)速度慢；3、服務(wù)端渲染因?yàn)槭嵌鄠€(gè)頁面，更有利于爬蟲爬取信息，客戶端渲染不利于SEO優(yōu)化；4、服務(wù)端渲染邏輯分離的不好，不利于前后端分離，開發(fā)效率低，客戶端渲染是采用前后端分離的方式開發(fā)，效率更高。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

客戶端渲染

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM。然而，也可以將同一個(gè)組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記”激活”為客戶端上完全可交互的應(yīng)用程序。什么意思呢？就是我們的頁面開始是沒內(nèi)容的，加載js后，js會(huì)生成和操縱dom，最后又瀏覽器渲染出頁面。這一系列的操作都是在瀏覽器完成的

看下實(shí)例：Vue客戶端應(yīng)用加載時(shí)如下：

url（http://localhost:8080/#/） 加載出來的是一個(gè)空的頁面，該頁面加載了app.js這個(gè)文件，該js文件會(huì)產(chǎn)生和操作Dom，最終瀏覽器渲染和繪制頁面。最終頁面如下：

客戶端渲染的優(yōu)點(diǎn)：

1、前后端分離，開發(fā)效率高。

2、用戶體驗(yàn)更好，我們將網(wǎng)站做成SPA（單頁面應(yīng)用）或者部分內(nèi)容做成SPA，當(dāng)用戶點(diǎn)擊時(shí)，不會(huì)形成頻繁的跳轉(zhuǎn)。

客戶端渲染的缺點(diǎn)：

1、前端響應(yīng)速度慢，特別是首屏，這樣用戶是受不了的。

2、不利于SEO優(yōu)化，因?yàn)榕老x不認(rèn)識(shí)SPA，所以它只是記錄了一個(gè)頁面。

服務(wù)端渲染

服務(wù)端渲染其實(shí)很好理解，瀏覽器請(qǐng)求的頁面就是服務(wù)器渲染好的。在前后端不分離的時(shí)代（現(xiàn)在依然有很多公司這樣做），很多同學(xué)應(yīng)該都知道Freemarker等模板，就是將頁面中的變量替換成實(shí)際數(shù)據(jù)之后，再交給瀏覽器渲染。

看一下服務(wù)端渲染的例子：

很明顯，客戶端接收的文件是服務(wù)端已經(jīng)渲染過的，即url（http://localhost:8080/user/123） 獲取的已經(jīng)是一個(gè)可展現(xiàn)的頁面，這點(diǎn)就是服務(wù)端和客戶端渲染的最大區(qū)別。服務(wù)端渲染的結(jié)果如下：

既然可以在客戶端渲染，為什么還要有服務(wù)端渲染呢，進(jìn)行服務(wù)端渲染一般會(huì)有下年幾方面原因：

• 更好的SEO（搜索引擎優(yōu)化，即讓搜索引擎能多的搜索網(wǎng)站）

  現(xiàn)在，大部分搜索引擎都已經(jīng)能夠索引同步JavaScript程序或應(yīng)用，注意是同步。如果網(wǎng)站通過Ajax異步加載內(nèi)容，并渲染到頁面上，搜索引擎是無法感知的，所以這個(gè)時(shí)候服務(wù)端渲染時(shí)一個(gè)更好的選擇。

• 更快的內(nèi)容到達(dá)時(shí)間

在網(wǎng)速比較慢，設(shè)備性能比較低時(shí)，使用服務(wù)端渲染是一個(gè)比較好的選擇，服務(wù)端把完整的頁面交給瀏覽器，瀏覽器只需渲染即可。從用戶體驗(yàn)的角度考慮，這時(shí)服務(wù)端渲染是一個(gè)更好的選擇。

當(dāng)然可能還包括，開發(fā)條件受限，有些類庫必須使用服務(wù)渲染。一些安裝部署的特殊要求等等。

服務(wù)端渲染會(huì)單純的靜態(tài)資源服務(wù)器相比，會(huì)損耗更多的CPU資源，所以設(shè)計(jì)好相應(yīng)的緩存策略很重要，在使用服務(wù)端渲染前要考慮好是否真的需要進(jìn)行服務(wù)端渲染。

服務(wù)端渲染的優(yōu)點(diǎn)：

1、盡量不占用前端的資源，前端這塊耗時(shí)少，速度快。

2、有利于SEO優(yōu)化，因?yàn)樵诤蠖擞型暾膆tml頁面，所以爬蟲更容易爬取信息。

服務(wù)端渲染的缺點(diǎn)：

1、不利于前后端分離，開發(fā)的效率降低了。

2、對(duì)html的解析，對(duì)前端來說加快了速度，但是加大了服務(wù)器的壓力。

服務(wù)端和客戶端渲染的區(qū)別：

1、二者本質(zhì)的區(qū)別：是誰來完成了html的完整拼接，服務(wù)端渲染是在服務(wù)端生成DOM樹，客戶端渲染是在客戶端生成DOM樹。

2、響應(yīng)速度：服務(wù)端渲染會(huì)加快頁面的響應(yīng)速度，客戶端渲染頁面的響應(yīng)速度慢。

3、SEO優(yōu)化：服務(wù)端渲染因?yàn)槭嵌鄠€(gè)頁面，更有利于爬蟲爬取信息，客戶端渲染不利于SEO優(yōu)化。

4、開發(fā)效率：服務(wù)端渲染邏輯分離的不好，不利于前后端分離，開發(fā)效率低，客戶端渲染是采用前后端分離的方式開發(fā)，效率更高，也是大部分業(yè)務(wù)采取的渲染方式。

直觀的區(qū)分服務(wù)端渲染和客戶端渲染：

源碼里如果能找到前端頁面中的內(nèi)容文字，那就是在服務(wù)端構(gòu)建的DOM，就是服務(wù)端渲染，反之是客戶端渲染。

應(yīng)該使用服務(wù)端渲染還是客戶端渲染：

我們要根據(jù)業(yè)務(wù)場(chǎng)景去選擇渲染的方式。

如果是企業(yè)級(jí)網(wǎng)站，主要功能是頁面展示，它沒有復(fù)雜的交互，并且需要良好的SEO，那我們應(yīng)該使用服務(wù)端渲染。

如果是后臺(tái)管理頁面，交互性很強(qiáng)，它不需要考慮到SEO，那我們應(yīng)該使用客戶端渲染。

具體使用哪種渲染方式也不是絕對(duì)的，現(xiàn)在很多網(wǎng)站使用服務(wù)端渲染和客戶端渲染結(jié)合的方式：首屏使用服務(wù)端渲染，其他頁面使用客戶端渲染。這樣可以保證首屏的加載速度，也完成了前后端分離。

讀到這里，這篇“vue服務(wù)端渲染和客戶端渲染的區(qū)別有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：vue服務(wù)端渲染和客戶端渲染的區(qū)別有哪些
分享路徑：http://chinadenli.net/article30/jiicso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)