這篇文章給大家介紹vue中 ssr的作用是什么，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

網(wǎng)站制作、成都網(wǎng)站設計介紹好的網(wǎng)站是理念、設計和技術的結(jié)合。創(chuàng)新互聯(lián)建站擁有的網(wǎng)站設計理念、多方位的設計風格、經(jīng)驗豐富的設計團隊。提供PC端+手機端網(wǎng)站建設，用營銷思維進行網(wǎng)站設計、采用先進技術開源代碼、注重用戶體驗與SEO基礎，將技術與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。

什么是服務器端渲染(SSR)？

Vue.js 是構(gòu)建客戶端應用程序的框架。默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染為服務器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將靜態(tài)標記"混合"為客戶端上完全交互的應用程序。

借助vue-server-renderer 將vue實例渲染為瀏覽器可以識別的html字符串。

為什么使用服務器端渲染(SSR)？

1. 更好的 SEO

2. 更快的內(nèi)容到達時間 （白屏）

左側(cè)為瀏覽器渲染，右側(cè)為服務器渲染，從圖中可以看出服務端渲染理論上明顯少于瀏覽器渲染。

基本用法

安裝

git clone https://github.com/s249359986/learnssr.git
cd learnssr 
npm install
npm run dev

代碼結(jié)構(gòu)

src
├── components
│  ├── Foo.vue
├── views
│  ├── Home.vue
├── App.vue
├── app.js 
├── client-entry.js
├── server-entry.js

代碼詳解

server.js 是服務端啟動入口文件，接收客戶端對頁面的所有請求。

if (isProd) {
 /**
  生產(chǎn)環(huán)境，createRenderer將已經(jīng)通過webpack打包好的server-bundle.js轉(zhuǎn)化為一個可以操作的renderer對象。
 **/
 renderer = createRenderer(fs.readFileSync(resolve('./dist/server-bundle.js'), 'utf-8'))
 
 /**
 入口模板文件
 **/
 indexHTML = parseIndex(fs.readFileSync(resolve('./dist/index.html'), 'utf-8'))
} else {
 /**
  開發(fā)環(huán)境，createRenderer將已經(jīng)通過webpack打包好的server-bundle.js轉(zhuǎn)化為一個可以操作的renderer對象。
 **/
 require('./build/setup-dev-server')(app, {
  bundleUpdated: bundle => {
   renderer = createRenderer(bundle)
  },
  indexUpdated: index => {//index為入口文件及index.html
   indexHTML = parseIndex(index)
  }
 })
}

function createRenderer (bundle) {

 return require('vue-server-renderer').createBundleRenderer(bundle, {
  cache: require('lru-cache')({
   max: 1,//1000,
   maxAge: 2000//1000 * 60 * 15
  }),
  runInNewContext: false
 })
}
/*
讀取入口文件
*/
function parseIndex (template) {
 const contentMarker = '<!-- APP -->'
 const i = template.indexOf(contentMarker)
 return {
  head: template.slice(0, i),
  tail: template.slice(i + contentMarker.length)
 }
}

const serve = (path, cache) => express.static(resolve(path), {
 maxAge: cache && isProd ? 60 * 60 * 24 * 30 : 0
})

app.use('/dist', serve('./dist'))

app.get('*', (req, res) => {
 if (!renderer) {
  return res.end('waiting for compilation... refresh in a moment.')
 }

 res.setHeader('Content-Type', 'text/html')
 res.setHeader('Server', serverInfo)

 var s = Date.now()
 const context = { url: req.url }
 /*
  渲染vue實例，context對象上下文
 */
 const renderStream = renderer.renderToStream(context)

 renderStream.once('data', () => {
  res.write(indexHTML.head)
 })

 renderStream.on('data', chunk => {
  res.write(chunk)
 })

 renderStream.on('end', () => {
  if (context.initialState) {
   res.write(
    `<script>window.__INITIAL_STATE__=${
     serialize(context.initialState, { isJSON: true })
    }</script>`
   )
  }
  res.end(indexHTML.tail)
  console.log(`whole request: ${Date.now() - s}ms`)
 })

 renderStream.on('error', err => {
  if (err && err.code === '404') {
   res.status(404).end('404 | Page Not Found')
   return
  }
  res.status(500).end('Internal Error 500')
  console.error(`error during render : ${req.url}`)
  console.error(err)
 })
})

const port = process.env.PORT || 8080
app.listen(port, () => {
 console.log(`server started at localhost:${port}`)
})

服務端vue實例入口文件，通過上下文對象獲取請求的url，映射給對應的組件。

export default context => {
 const s = isDev && Date.now()
 router.push(context.url)
 const matchedComponents = router.getMatchedComponents()
 if (!matchedComponents.length) {
  return Promise.reject({ code: '404' })
 }
 return Promise.all(matchedComponents.map(component => {
/*
增加服務端數(shù)據(jù)預處理 start

*/
  if (component.asyncData) {
     return component.asyncData({
      store,
      route: router.currentRoute
     })
    }

    /*
    增加服務端數(shù)據(jù)預處理 end

    */
 })).then(() => {
  isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
  context.initialState = store.state
  return app
 })
}

客戶端vue實例入口文件.

/*

第一種方式
 */

Vue.mixin({
 beforeMount () {
  const { asyncData } = this.$options
 console.log('beforeMount',this.$store)
  if (asyncData) {

   // 將獲取數(shù)據(jù)操作分配給 promise
   // 以便在組件中，我們可以在數(shù)據(jù)準備就緒后
   // 通過運行 `this.dataPromise.then(...)` 來執(zhí)行其他任務
   this.dataPromise = asyncData({
    store: this.$store,
    route: this.$route
   })
  }
 },
 beforeRouteUpdate (to, from, next) {
 const { asyncData } = this.$options
 console.log('beforeRouteUpdate',this.$store)
 if (asyncData) {
 asyncData({
  store: this.$store,
  route: to
 }).then(next).catch(next)
 } else {
 next()
 }
}
})

/**
更新客戶端store，與服務端store同步
**/
// store.replaceState(window.__INITIAL_STATE__)
if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__)
}
// actually mount to DOM


router.onReady(() => {
/**
掛載實例，客戶端激活，所謂激活，指的是 Vue 在瀏覽器端接管由服務端發(fā)送的靜態(tài) HTML，使其變?yōu)橛?nbsp;Vue 管理的動態(tài) DOM 的過程。注釋掉app.$mount('#app') 可以清楚看到<div id="app" data-server-rendered="true"> 客戶端通過data-server-rendered="true"知道該html是vue在服務端渲染的，并且不會在做多余的渲染。由于在服務端無法綁定事件，只有通過客戶端vue處理。
**/
 app.$mount('#app')
})

關于vue中 ssr的作用是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章標題：vue中ssr的作用是什么
文章起源：http://www.chinadenli.net/article8/ieoeop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、小程序開發(fā)、響應式網(wǎng)站、品牌網(wǎng)站設計、定制網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(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)