您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關ssr和vue的區別有哪些,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
ssr和vue的區別是:ssr是在服務器將組件渲染成HTML字符串后返回,而vue是在客戶端發送請求后,服務器返回空的HTML、css、js等,組件在客戶端進行渲染。
本文操作環境:windows10系統、Vue2.9.6版,DELL G3電腦。
ssr
是vue
的服務端渲染技術,nuxt
是一個可以用來做ssr
服務端渲染開發的框架.ssr
是技術基礎,nuxt
是封裝
Vue.js
是構建客戶端應用程序的框架。默認情況下,可以在瀏覽器中輸出 Vue
組件,進行生成 DOM
和操作 DOM
。全部的操作都是在客戶端運行. 在這種情況下, 生命周期 mounted
之前 ,看不到任何東西的, 或者如果我們的客戶端瑞瀏覽器,禁用了js
功能的話, 就會一片空白
然而,vuejs
也可以將同一個vue
組件在服務器端直接就渲染為 HTML
字符串,將它們直接發送到瀏覽器,最后將這些靜態標記"激活"為客戶端上完全可交互的應用程序
普通vue
是客戶端發送請求后,服務器返回空的HTML,css,js
等,在客戶端進行渲染ssr
是在服務器渲染成字符串后返回
npm init
npm install vue vue-server-renderer --save
// 第 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
// 第 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
與傳統 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的區別有哪些”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。