2017-05-11 發佈從零開始搭建vue-ssr系列之三：服務器渲染的奧祕（轉）

時間 2019-11-07

標籤發佈開始搭建 vue ssr 系列之三服務器渲染奧祕简体版

原文原文鏈接

這是我看過ssr寫的最好的，連接都在低下

Vue全家桶都是必要的嗎？

固然不是，javascript

只有Vuex是必須的

，實踐發現， vuex也不是必須的，使用 vuex能夠很方便的管理先後端共享的數據。若是要不做用 vuex，能夠在 created中使用以下方法來獲取數據

let context = this.$ssrContext ? this.$ssrContext.state : window['__INITIAL_STATE__']複製代碼

注：必定要在created裏面使用，若是在mounted裏面使用，Node端是不認識window對象，從而報錯。css

爲何必需要用到vuex？

即然數據在服務器端已經取到了，爲何還要共享到前端？

這就涉及到ssr渲染的奧祕了，按理說，服務端把數據取到以後，渲染成HTML返回到前端，這樣前端就用不到這些數據了，取數據只爲了渲染，這種狀況只適用於純靜態的渲染，就是拿到10條數據，渲染成一個列表，這個列表上沒有交互，沒有click、hover等效果，可是一些有click事件，就像例子上面那樣，點擊每一個item，都會彈出title，這些是須要js來作的，可是vue-
ssr不能綁定javascript事件
，只能是HTML+CSS，也就是說服務器端使用vue-ssr渲染出來的返回到瀏覽器的也只能是HTML+CSS。再強調一次：vue-ssr渲染出來只是HTML+CSS的字符串，綁定事件須要在瀏覽器端來作，前端須要數據和已經渲染好的DOM作比對，從而添加上各類事件！

那事件怎麼辦？

這就回到了第一個問題，爲何前端也須要數據，既然服務器不能增長事件，那隻能前端增長嘍。vue-ssr有一個比較關鍵的地方就是，先後必須共用同一套vue文件，也就是說一個.vue文件，前端也要用，後端也要用，爲何要這樣作，你們想過沒有？答案：就是後端從vuex裏面取到數據以後，對<template>裏面的HTML使用vue的語法進渲染，最終渲染成真正的HTML，對<style>裏面的內容，使用loader，抽取成css，因此服務端渲染的成果是HTML+CSS；前端也是從vuex裏面取到數據，前端的渲染主要作2件事，1.拿到數據，使用virtual-dom進行預渲染，而後和服務端渲染出來的進行比對，比對兩邊渲染的內容是否是一致的；2.對DOM元素的事件進行綁定，也就是回答的問題，事件在這塊進行的處理。

一點小建議: 多多理解原理, 多多實踐

我想只有理解了原理性的東西，再看代碼，再看流程，才能理解是爲何要這麼搞，由於這些東西官方文檔上面說的也不是很清楚，網上的例子也很多，可是不多提這塊，剛開始我拿到各類例子以後，也很蒙，這寫的都是啥！啥！啥！尤爲是官方給的例子，根本就沒有頭緒。如今理清了，分享給你們，但願有幫忙，下一篇咱們來看下代碼實現。