本帖說明
該貼是對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...