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