vue服務端渲染(ssr)與普通vue的差別,ssr的基本使用

ssr

是

vue

的服務端渲染技術,

nuxt

是一個可以用來做

ssr

服務端渲染開發的架構.

ssr

是技術基礎,

nuxt

是封裝

一、什麼是SSR？

Vue.js

是建構用戶端應用程式的架構。預設情況下，可以在浏覽器中輸出

Vue

元件，進行生成

DOM

和操作

DOM

。全部的操作都是在用戶端運作. 在這種情況下, 生命周期

mounted

之前 ,看不到任何東西的, 或者如果我們的用戶端瑞浏覽器,禁用了

js

功能的話, 就會一片空白

然而，

vuejs

也可以将同一個

vue

元件在伺服器端直接就渲染為

HTML

字元串，将它們直接發送到浏覽器，最後将這些靜态标記"激活"為用戶端上完全可互動的應用程式

二、ssr與普通vue的差別

普通

vue

是用戶端發送請求後,伺服器傳回空的

HTML,css,js

等,在用戶端進行渲染

ssr

是在伺服器渲染成字元串後傳回

三、渲染一個vue執行個體

初始化

npm init

下載下傳安裝

npm install vue vue-server-renderer --save

建立一個js

// 第 1 步：建立一個 Vue 執行個體
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步：建立一個 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 執行個體渲染為 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果沒有傳入回調函數，則會傳回 Promise：
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})
           

調出終端顯示效果

node 檔案名

,顯示

<div>Hello World</div>

四、與伺服器內建

下載下傳安裝

npm install express --save

js

// 第 1 步：建立一個 Vue 執行個體
const Vue = require('vue')
const express = require('express')//建立伺服器
const app = new Vue({
    template: `<div>Hello World</div>`
})

const server = express()


// 第 2 步：建立一個 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 在 2.5.0+，如果沒有傳入回調函數，則會傳回 Promise：
renderer.renderToString(app).then(html => {
    console.log(html)
}).catch(err => {
    console.error(err)
})

server.get("*", (req, res) => {

    // 第 3 步：将 Vue 執行個體渲染為 HTML
    renderer.renderToString(app, (err, html) => {
        if (err) throw err
        console.log(html)

        res.send(html)

        // => <div data-server-rendered="true">Hello World</div>
    })

})
//打開伺服器,監聽端口等待浏覽器通路
server.listen(8080, (err) => {
    console.log("ok");
})
           

效果

輸入

127.0.0.1:8080

四、為什麼/要不要使用伺服器端渲染 (SSR)？

與傳統 SPA (單頁應用程式 (Single-Page Application)) 相比，伺服器端渲染 (SSR) 的優勢主要在于：

• 更好的 SEO，由于搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面。

• 更快的内容到達時間 (time-to-content)，特别是對于緩慢的網絡情況或運作緩慢的裝置。無需等待所有的 JavaScript 都完成下載下傳并執行，你的使用者将會更快速地看到完整渲染的頁面。

  使用伺服器端渲染 (SSR) 時還需要有一些權衡之處：

• 開發條件所限。浏覽器特定的代碼，隻能在某些生命周期鈎子函數 (lifecycle hook) 中使用；一些外部擴充庫 (external library) 可能需要特殊處理，才能在伺服器渲染應用程式中運作。
• 涉及建構設定和部署的更多要求。與可以部署在任何靜态檔案伺服器上的完全靜态單頁面應用程式 (SPA) 不同，伺服器渲染應用程式，需要處于 Node.js server 運作環境。

• 更多的伺服器端負載。在 Node.js 中渲染完整的應用程式，顯然會比僅僅提供靜态檔案的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)，是以如果你預料在高流量環境 (high traffic) 下使用，請準備相應的伺服器負載，并明智地采用緩存政策。

  在對你的應用程式使用伺服器端渲染 (SSR) 之前，你應該問的第一個問題是，是否真的需要它。這主要取決于内容到達時間 (time-to-content) 對應用程式的重要程度。例如，如果你正在建構一個内部儀表盤，初始加載時的額外幾百毫秒并不重要，這種情況下去使用伺服器端渲染 (SSR) 将是一個小題大作之舉。然而，内容到達時間 (time-to-content) 要求是絕對關鍵的名額，在這種情況下，伺服器端渲染 (SSR) 可以幫助你實作最佳的初始加載性能。