vue ssr 指南詳讀

本帖說明

該貼是對vue SSR Guide解讀和補充，對於官網文檔已有內容會以引用方式體現。因爲官網demo在國內沒法運行，該貼最後也提供了一個完整的能夠運行的demo,帖子中提到的代碼均是來自於該demo,供學習交流。

介紹

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

Vue.js 是構建客戶端應用程序的框架。默認狀況下，能夠在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操做 DOM。然而，也能夠將同一個組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將靜態標記"混合"爲客戶端上徹底交互的應用程序。

---

藉助vue-server-renderer 將vue實例渲染爲瀏覽器能夠識別的html字符串。

爲何使用服務器端渲染(SSR)？

• 更好的 SEO
• 更快的內容到達時間 （白屏）

---

左側爲瀏覽器渲染，右側爲服務器渲染，從圖中能夠看出服務端渲染理論上明顯少於瀏覽器渲染。

基本用法

安裝

git clone https://github.com/s249359986/learnssr.git
cd learnssr 
npm install
npm run dev
複製代碼

代碼結構

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


複製代碼

代碼詳解

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

if (isProd) {
  /** 生產環境，createRenderer將已經經過webpack打包好的server-bundle.js轉化爲一個能夠操做的renderer對象。 **/
  renderer = createRenderer(fs.readFileSync(resolve('./dist/server-bundle.js'), 'utf-8'))
  
  /** 入口模板文件 **/
  indexHTML = parseIndex(fs.readFileSync(resolve('./dist/index.html'), 'utf-8'))
} else {
  /** 開發環境，createRenderer將已經經過webpack打包好的server-bundle.js轉化爲一個能夠操做的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 => {
/* 增長服務端數據預處理 start */
    if (component.asyncData) {
          return component.asyncData({
            store,
            route: router.currentRoute
          })
        }

        /* 增長服務端數據預處理 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) {

      // 將獲取數據操做分配給 promise
      // 以便在組件中，咱們能夠在數據準備就緒後
      // 經過運行 `this.dataPromise.then(...)` 來執行其餘任務
      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 在瀏覽器端接管由服務端發送的靜態 HTML，使其變爲由 Vue 管理的動態 DOM 的過程。註釋掉app.$mount('#app') 能夠清楚看到<div id="app" data-server-rendered="true"> 客戶端經過data-server-rendered="true"知道該html是vue在服務端渲染的，而且不會在作多餘的渲染。因爲在服務端沒法綁定事件，只有經過客戶端vue處理。 **/
 app.$mount('#app')
})


複製代碼

---

持續更新中......