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

成都創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、碭山網(wǎng)站定制設(shè)計、自適應品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應式網(wǎng)頁設(shè)計等建站業(yè)務，價格優(yōu)惠性價比高，為碭山等各大城市提供網(wǎng)站開發(fā)制作服務。

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

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

ssr和vue的區(qū)別是

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

一、什么是SSR

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

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

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

三、渲染一個vue實例

初始化

npm init

下載安裝

npm install vue vue-server-renderer --save

創(chuàng)建一個js

// 第 1 步：創(chuàng)建一個 Vue 實例
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 實例渲染為 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>

四、與服務器集成

下載安裝

npm install express --save

js

// 第 1 步：創(chuàng)建一個 Vue 實例
const Vue = require('vue')
const express = require('express')//創(chuàng)建服務器
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 實例渲染為 HTML
    renderer.renderToString(app, (err, html) => {
        if (err) throw err
        console.log(html)

        res.send(html)

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

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

效果

輸入127.0.0.1:8080

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

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

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

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

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

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

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

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

本文標題：ssr和vue的區(qū)別有哪些
鏈接URL：http://chinadenli.net/article34/giogpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、小程序開發(fā)、響應式網(wǎng)站、搜索引擎優(yōu)化、域名注冊、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)