vue ssr 指南詳讀

本帖說明

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

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

vue.js 是構建客戶端應用程式的框架。預設情況下，可以在瀏覽器中輸出 vue 元件，進行生成 dom 和操作 dom。然而，也可以將同乙個元件渲染為伺服器端的 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:$`)
})

export

default context => )
} return
promise.all(matchedcomponents.map(component => )}/*
增加服務端資料預處理 end
*/})).then(() => ms`)
context.initialstate = store.state})}

/*

第一種方式
*/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...