摘要：當(dāng)然你可以采用頁面模板的形式，將兩者相分離這里將是應(yīng)用程序標(biāo)記注入的地方中包含了模板當(dāng)然這只是最簡單的一個例子，瀏覽器收到的僅僅是對應(yīng)實例的代碼，并沒有將其激活，因此是不可交互的。

　　首先歡迎大家關(guān)注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現(xiàn)，能堅持下去也是靠的是自己的熱情和大家的鼓勵。
　　

　　Vue同構(gòu)也就是我們常說的服務(wù)器渲染(Server Side Render)，服務(wù)器渲染放在今天已經(jīng)算不上是一個新鮮的東西了，從React到Vue都有各自的服務(wù)器渲染方案，很多小伙伴可能都有所接觸，首先我們要了解一下為什么需要服務(wù)器渲染呢？Vue和React這類框架有一個特點，都屬于瀏覽器渲染，比如一個最簡單的例子:
　　

  {{ message }}

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})

　　我們可以看到，我們收到服務(wù)器的模板中其實并沒有我們所期待界面對應(yīng)的html結(jié)構(gòu)，而僅有一個用于掛載應(yīng)用的根元素，在客戶端瀏覽器執(zhí)行加載的JavaScript代碼時，才會創(chuàng)建對應(yīng)的DOM結(jié)構(gòu)。然而瀏覽器渲染其實存在兩個明顯的缺點:

對搜索引擎優(yōu)化(SEO:Search Engine Optimization)不友好，各個搜索引擎實際上都是對網(wǎng)頁的html結(jié)構(gòu)和同步Javascript代碼進行索引，因而客戶端渲染可能會造成你的網(wǎng)頁無法被搜索引擎正確索引。

TTC(內(nèi)容到達時間:Time-To-Conten)過長，試想如果設(shè)備的網(wǎng)絡(luò)較差或者設(shè)備的代碼執(zhí)行速度較慢，用戶需要等待較長的時間才能看到頁面的內(nèi)容，等待期間看到的都是網(wǎng)頁的白屏或者其他的加載狀態(tài)，這絕對是糟糕的用戶體驗。

　　幸運的是，Node的到來為這一切帶來了曙光，JavaScript不僅僅可以在瀏覽器中執(zhí)行，而且也可能在后端環(huán)境中執(zhí)行。因此我們可以將用戶的界面在服務(wù)器中渲染成HTML 字符串，然后再傳給瀏覽器，這樣用戶獲得的就是可預(yù)覽的界面，最后將靜態(tài)標(biāo)記"混合"為客戶端上完全交互的應(yīng)用程序，整個渲染的過程就結(jié)束了。

　　Vue服務(wù)器渲染使用官方提供的庫vue-server-renderer，由于Express比較直觀，我們采用Express作為后端服務(wù)器，我們首先給出一個最簡單的例子:

// server.js
const Vue = require("vue")
const server = require("express")()
// 創(chuàng)建一個 renderer
const renderer = require("vue-server-renderer").createRenderer()

server.get("*", (req, res) => {
  // 創(chuàng)建一個 Vue 實例
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `
訪問的 URL 是： {{ url }}
`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end("Internal Server Error")
      return
    }
    // html就是Vue實例app渲染的html
    res.end(`
      
      
        
        ${html}
      
    `)
  })
})

server.listen(8080)

　　然后啟動node server.js，并且瀏覽器中訪問比如http://localhost:8080/app，瀏覽器界面中則會顯示出:

訪問的 URL 是：/app

　　這時候觀察該請求的返回值是:

　　我們發(fā)現(xiàn)返回的html中已經(jīng)渲染好DOM元素。因此我們無需等待立即可以看見頁面的內(nèi)容。而上面的代碼邏輯也非常簡單，http服務(wù)器接收到get請求的時候，都會創(chuàng)建一個Vue實例，vue-server-renderer中的createRenderer用來創(chuàng)建一個Renderer實例,Renderer中的renderToString用來將Vue實例轉(zhuǎn)化對應(yīng)的HTML字符串，需要注意的是，我們需要將創(chuàng)建好的字符串包裹在html一并返回。當(dāng)然你可以采用頁面模板的形式，將兩者相分離:

  
  
    
    
              
  

                  
最新活動