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中文網其他相關文章！
