vue ssr 指南詳讀

2021-09-27 11:16:07 字數 2751 閱讀 4808

本帖說明

該貼是對vue ssr guide解讀和補充,對於官網文件已有內容會以引用方式體現。由於官網demo在國內無法執行,該貼最後也提供了乙個完整的可以執行的demo,帖子中提到的**均是來自於該demo,供學習交流。

什麼是伺服器端渲染(ssr)?

vue.js 是構建客戶端應用程式的框架。預設情況下,可以在瀏覽器中輸出 vue 元件,進行生成 dom 和操作 dom。然而,也可以將同乙個元件渲染為伺服器端的 html 字串,將它們直接傳送到瀏覽器,最後將靜態標記"混合"為客戶端上完全互動的應用程式。

借助vue-server-renderer 將vue例項渲染為瀏覽器可以識別的html字串。

為什麼使用伺服器端渲染(ssr)?

左側為瀏覽器渲染,右側為伺服器渲染,從圖中可以看出服務端渲染理論上明顯少於瀏覽器渲染。

安裝

git clone 

cd learnssr

npm install

npm run dev

**結構
src

├── components

│ ├── foo.vue

├── views

│ ├── home.vue

├── client-entry.js

├── server-entry.js

**詳解

server.js 是服務端啟動入口檔案,接收客戶端對頁面的所有請求。

if (isprod)  else ,

indexupdated: index =>

})}function

createrenderer (bundle) ),

runinnewcontext: false

})}/*

讀取入口檔案

*/function

parseindex (template)

}const serve = (path, cache) => express.static(resolve(path), )

if (!renderer)

res.setheader('content-type', 'text/html')

res.setheader('server', serverinfo)

var s = date.now()

const context =

/*渲染vue例項,context物件上下文

*/const renderstream = renderer.rendertostream(context)

renderstream.once('data', () => )

renderstream.on('data', chunk => )

renderstream.on('end', () =>

res.end(indexhtml.tail)

console.log(`whole request: $ms`)

})renderstream.on('error', err =>

res.status(500).end('internal error 500')

console.error(`error during render : $`)

console.error(err)

})})const port = process.env.port || 8080

console.log(`server started at localhost:$`)

})

服務端vue例項入口檔案,通過上下文物件獲取請求的url,對映給對應的元件。

export

default context => )

} return

promise.all(matchedcomponents.map(component => )}/*

增加服務端資料預處理 end

*/})).then(() => ms`)

context.initialstate = store.state})}

客戶端vue例項入口檔案.

/*

第一種方式

*/vue.mixin( = this.$options

console.log('beforemount',this.$store)

if (asyncdata) )}},

beforerouteupdate (to, from, next) = this.$options

console.log('beforerouteupdate',this.$store)

if (asyncdata) ).then(next).catch(next)

} else }})

/**更新客戶端store,與服務端store同步

**/// store.replacestate(window.__initial_state__)

if (window.__initial_state__)

// actually mount to dom

router.onready(() => )

持續更新中......

OSG三維渲染引擎程式設計指南(詳讀)

一 openscenegraph發展及應用 二 osg及osgearth的編譯及安裝 三 osg與數學之間扯不斷理還亂的關係 四 場景的組織及渲染 1.node 2.geode 2.1 billboard 3.group 3.1 osg positionatitudetransform 位置變換節點...

從零搭建vue ssr詳細介紹

ssr是用vue開發中乙個常見且複雜的問題,雖然官方推出nuxt來解決此問題,但是了解ssr的原理也是很有必要的,網上也有很多vue ssr相關的介紹,但是大多講的不夠詳細。這裡我將從零搭建乙個vue ssr專案,並將期間可能遇到的問題一一解釋。如果你對vue ssr完全不了解可以跟我一步一步將 敲...

VUE SSR渲染之NuxtJS 路由篇

一 路由跳轉 nuxt提供 nuxt link元件進行跳轉 nuxt link to home home page nuxt link 二 基礎路由 預設情況下nuxt會把pages目錄下的檔案讀取為路由位址。普通情況如下 pages user index.vue one.vue index.vue...