ssr和vue的區(qū)別有哪些

這篇文章將為大家詳細(xì)講解有關(guān)ssr和vue的區(qū)別有哪些，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

ssr和vue的區(qū)別是：ssr是在服務(wù)器將組件渲染成HTML字符串后返回，而vue是在客戶端發(fā)送請求后，服務(wù)器返回空的HTML、css、js等，組件在客戶端進(jìn)行渲染。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

ssr和vue的區(qū)別是

ssr是vue的服務(wù)端渲染技術(shù),nuxt是一個可以用來做ssr服務(wù)端渲染開發(fā)的框架.
ssr是技術(shù)基礎(chǔ),nuxt是封裝

一、什么是SSR

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM。全部的操作都是在客戶端運(yùn)行. 在這種情況下, 生命周期 mounted 之前 ,看不到任何東西的, 或者如果我們的客戶端瑞瀏覽器,禁用了js功能的話, 就會一片空白
然而，vuejs 也可以將同一個vue組件在服務(wù)器端直接就渲染為 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記"激活"為客戶端上完全可交互的應(yīng)用程序

二、ssr與普通vue的區(qū)別

普通vue是客戶端發(fā)送請求后,服務(wù)器返回空的HTML,css,js等,在客戶端進(jìn)行渲染
ssr是在服務(wù)器渲染成字符串后返回

三、渲染一個vue實(shí)例

初始化

npm init

下載安裝

npm install vue vue-server-renderer --save

創(chuàng)建一個js

// 第 1 步：創(chuàng)建一個 Vue 實(shí)例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步：創(chuàng)建一個 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：將 Vue 實(shí)例渲染為 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果沒有傳入回調(diào)函數(shù)，則會返回 Promise：
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

調(diào)出終端顯示效果

node 文件名,顯示<p>Hello World</p>

四、與服務(wù)器集成

下載安裝

npm install express --save

js

// 第 1 步：創(chuàng)建一個 Vue 實(shí)例
const Vue = require('vue')
const express = require('express')//創(chuàng)建服務(wù)器
const app = new Vue({
    template: `<div>Hello World</div>`
})

const server = express()


// 第 2 步：創(chuàng)建一個 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 在 2.5.0+，如果沒有傳入回調(diào)函數(shù)，則會返回 Promise：
renderer.renderToString(app).then(html => {
    console.log(html)
}).catch(err => {
    console.error(err)
})

server.get("*", (req, res) => {

    // 第 3 步：將 Vue 實(shí)例渲染為 HTML
    renderer.renderToString(app, (err, html) => {
        if (err) throw err
        console.log(html)

        res.send(html)

        // => <div data-server-rendered="true">Hello World</div>
    })

})
//打開服務(wù)器,監(jiān)聽端口等待瀏覽器訪問
server.listen(8080, (err) => {
    console.log("ok");
})

效果

輸入127.0.0.1:8080

四、為什么/要不要使用服務(wù)器端渲染 (SSR)？

與傳統(tǒng) SPA (單頁應(yīng)用程序 (Single-Page Application)) 相比，服務(wù)器端渲染 (SSR) 的優(yōu)勢主要在于：

• 更好的 SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。

• 更快的內(nèi)容到達(dá)時間 (time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。無需等待所有的 JavaScript 都完成下載并執(zhí)行，你的用戶將會更快速地看到完整渲染的頁面。
  使用服務(wù)器端渲染 (SSR) 時還需要有一些權(quán)衡之處：

• 開發(fā)條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數(shù) (lifecycle hook) 中使用；一些外部擴(kuò)展庫 (external library) 可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。

• 涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 (SPA) 不同，服務(wù)器渲染應(yīng)用程序，需要處于 Node.js server 運(yùn)行環(huán)境。

• 更多的服務(wù)器端負(fù)載。在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預(yù)料在高流量環(huán)境 (high traffic) 下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。
  在對你的應(yīng)用程序使用服務(wù)器端渲染 (SSR) 之前，你應(yīng)該問的第一個問題是，是否真的需要它。這主要取決于內(nèi)容到達(dá)時間 (time-to-content) 對應(yīng)用程序的重要程度。例如，如果你正在構(gòu)建一個內(nèi)部儀表盤，初始加載時的額外幾百毫秒并不重要，這種情況下去使用服務(wù)器端渲染 (SSR) 將是一個小題大作之舉。然而，內(nèi)容到達(dá)時間 (time-to-content) 要求是絕對關(guān)鍵的指標(biāo)，在這種情況下，服務(wù)器端渲染 (SSR) 可以幫助你實(shí)現(xiàn)最佳的初始加載性能。

關(guān)于“ssr和vue的區(qū)別有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。