首頁  >  文章  >  web前端  >  ssr和vue的差別是什麼

ssr和vue的差別是什麼

WBOY
WBOY原創
2022-03-17 11:59:552797瀏覽

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

ssr和vue的差別是什麼

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

ssr和vue的差別是什麼

ssrvue的服務端渲染技術,nuxt是可以用來做ssr服務端渲染開發的框架.
ssr是技術基礎,nuxt是封裝

一、什麼是SSR

Vue.js 是建立客戶端應用程式的框架。預設情況下,可以在瀏覽器中輸出 Vue 元件,進行產生 DOM 和操作 DOM。全部的操作都是在客戶端運行. 在這種情況下, 生命週期mounted 之前,看不到任何東西的, 或者如果我們的客戶端瑞瀏覽器,禁用了js 功能的話, 就會一片空白
然而,vuejs 也可以將同一個vue元件在伺服器端直接就渲染為HTML 字符串,將它們直接發送到瀏覽器,最後將這些靜態標記"激活"為客戶端上完全可交互的應用程序

二、ssr與普通vue的區別

普通vue是客戶端發送請求後,伺服器回傳空的HTML,css,js#等,在客戶端進行渲染
ssr是在伺服器渲染成字串後回傳

ssr和vue的差別是什麼

三、渲染一個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

ssr和vue的差別是什麼

四、與伺服器整合

下載安裝

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和vue的差別是什麼

#四、為什麼/要不要用伺服器端渲染(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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn