ssr和vue的區別有哪些

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

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 data-server-rendered="true">Hello World</div>
})

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

調出終端顯示效果

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

四、與服務器集成

下載安裝

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 data-server-rendered="true">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) 可以幫助你實現最佳的初始加載性能。

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