vue ssr 指南詳讀

__7克__發表於2019-03-01
Vue

本帖說明

該貼是對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`)
})


複製程式碼

持續更新中……

相關文章