vue服務(wù)端渲染SSR的示例分析

小編給大家分享一下vue服務(wù)端渲染SSR的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站專注于臨夏網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供臨夏營銷型網(wǎng)站建設(shè)，臨夏網(wǎng)站制作、臨夏網(wǎng)頁設(shè)計、臨夏網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造臨夏網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨夏網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

前言

首先來講一下服務(wù)端渲染，直白的說就是在服務(wù)端拿數(shù)據(jù)進(jìn)行解析渲染，直接生成html片段返回給前端。具體用法也有很多種比如：

傳統(tǒng)的服務(wù)端模板引擎渲染整個頁面

服務(wù)渲染生成htmll代碼塊, 前端 AJAX 獲取然后js動態(tài)添加

服務(wù)端渲染的優(yōu)劣

首先是seo問題，前端動態(tài)渲染的內(nèi)容是不能被抓取到的，而使用服務(wù)端渲染就可以解決這個問題。還有就是首屏加載過慢這種問題，比如在SPA中，打開首頁需要初始加載很多資源，這時考慮在首屏使用服務(wù)端渲染，也是一種折中的優(yōu)化方案。但是使用SSR時，勢必會增加服務(wù)器的壓力，還有可能會需要前后端同構(gòu)，使用同樣的模板引擎，這似乎與前后端分離的觀點又是矛盾的。廢話就說到這里，下面來看一下vue框架中的服務(wù)器渲染。

vue-server-renderer

vue-server-renderer就是vue中處理服務(wù)端加載的一個模塊了，官方文檔：https://ssr.vuejs.org/en/，暫時沒有中文版的，我也只是稍微看了一些，然后寫了一個簡單的demo。首先新建一個test.js文件，并用npm安裝依賴express、vue、vue-server-renderer。引入vue-server-renderer之后，然后新建一個temp.html作為渲染的基本模板，用createRenderer方法新建一個render實例，這里我傳入temp.html作為renderer的template的參數(shù)，在后面渲染時就會以這個temp.html作為基礎(chǔ)模板。

const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./temp.html', 'utf-8')
})

temp.html:

<!DOCTYPE html>
<html lang="en">
<head><title>{{title}}</title></head>
 <body>
  <!--vue-ssr-outlet-->
 </body>
</html>

接下來隨便定義一些渲染用的數(shù)據(jù)，然后用express新建一個node服務(wù)器，再定義一個vue的實例。然后再調(diào)用renderer的renderToString方法來渲染生成html，渲染成功后返回給客戶端。

const Vue = require('vue')
const server = require('express')()
const context = {
 title: 'hello'
}
const mocktitle = '我愛吃的水果'
const mockdata = ['香蕉', '蘋果', '橘子']
server.get('*', (req, res) => {
 const app = new Vue({
  data: {
   url: req.url,
   data: mockdata,
   title: mocktitle
  },
  template: <div>The visited URL is: {{ url }}
  <h4>{{title}}</h4>
  <p v-for='item in data'>{{item}}</p>
  </div>
 })
 renderer.renderToString(app, context, (err, html) => {
  if (err) {
   res.status(500).end('Internal Server Error')
   return
  }
  res.end(html)
 })
})
server.listen(8080)

注意這里渲染的數(shù)據(jù)有兩種，mockdata是作為vue實例的data來渲染在實例模板中的，而context是作為基礎(chǔ)模板的data來渲染temp.html的?？梢钥吹皆诜?wù)端用vue進(jìn)行渲染的規(guī)則和前端渲染時一樣，v-for、v-if等都可以正常使用。最后命令行輸入node test.js，然后在瀏覽器打開http://localhost:8080 查看結(jié)果如下:

vue服務(wù)端渲染SSR的示例分析

可以看到服務(wù)端直接返回了一個渲染完成的Doc，示例demo到此結(jié)束。

看完了這篇文章，相信你對“vue服務(wù)端渲染SSR的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前文章：vue服務(wù)端渲染SSR的示例分析
URL分享：http://muchs.cn/article6/ijooog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、商城網(wǎng)站、定制網(wǎng)站、網(wǎng)頁設(shè)計公司

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

猜你還喜歡下面的內(nèi)容