ssr和vue的區別是：ssr是在伺服器將元件渲染成HTML字串後返回，而vue是在客戶端發送請求後，伺服器返回空的HTML、css、js等，元件在客戶端進行渲染。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
ssr是vue的服務端渲染技術,nuxt是可以用來做ssr服務端渲染開發的框架.ssr是技術基礎,nuxt是封裝
Vue.js 是建立客戶端應用程式的框架。預設情況下，可以在瀏覽器中輸出 Vue 元件，進行產生 DOM 和操作 DOM。全部的操作都是在客戶端運行. 在這種情況下, 生命週期mounted 之前,看不到任何東西的, 或者如果我們的客戶端瑞瀏覽器,禁用了js 功能的話, 就會一片空白
然而，vuejs 也可以將同一個vue元件在伺服器端直接就渲染為HTML 字符串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"為客戶端上完全可交互的應用程序
普通vue是客戶端發送請求後,伺服器回傳空的HTML,css,js#等,在客戶端進行渲染ssr是在伺服器渲染成字串後回傳
下載安裝##npm init
npm install vue vue-server-renderer --save
// 第 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
// 第 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
vue.js教學》】
以上是ssr和vue的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
