ssr和vue的差別是什麼

ssr和vue的區別是：ssr是在伺服器將元件渲染成HTML字串後返回，而vue是在客戶端發送請求後，伺服器返回空的HTML、css、js等，元件在客戶端進行渲染。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

ssr和vue的差別是什麼

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>Hello World</div>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

調出終端顯示效果

node 檔名,顯示

Hello World

四、與伺服器整合

下載安裝

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>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) 可以幫助你實現最佳的初始載入效能。
  

【相關推薦：《

vue.js教學》】

以上是ssr和vue的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！