中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

ssr和vue的區別有哪些

發布時間:2022-03-17 12:34:11 來源:億速云 閱讀:340 作者:小新 欄目:編程語言

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

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

本文操作環境: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 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>

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

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

乐业县| 凤阳县| 普兰店市| 泰宁县| 上林县| 宝清县| 太谷县| 江都市| 都江堰市| 贞丰县| 克什克腾旗| 寻乌县| 阳曲县| 随州市| 贵州省| 安龙县| 阳高县| 兴城市| 旌德县| 彭州市| 工布江达县| 通州市| 闽清县| 郸城县| 德州市| 商河县| 桐庐县| 平潭县| 定州市| 陆良县| 东莞市| 尤溪县| 鄂温| 广水市| 邢台市| 得荣县| 鸡东县| 离岛区| 隆回县| 平遥县| 巴彦淖尔市|