请问vuejs ssr是怎么把异步的数据获取并渲染出来的
官网的HN2.0例子中用了vuex，因为我还不懂vuex，所以写的demo里边没有用这个，然后问题就是我从firebase获取的数据不能做到服务端渲染，每次我渲染出来返回的html都没有从接口获取来的数据，我的理解是因为接口是异步获取的，所以渲染不出来，可是为毛官网的例子也是从接口获取的数据可以通过服务端渲染？
6 回复
const context = { url: req.url }
const renderStream = renderer.renderToStream(context)
// server-entry.js
import Vue from 'vue'
import App from './App.vue'
const app = new Vue(App)
// the default export should be a function
// which will receive the context of the render call
export default context => {
// data pre-fetching
return app.fetchServerData(context.url).then(() => {
return app
})
}
你说的是这个吧
- 在组件内实现一个preFetch接口，用来获取组件想要的数据
- 服务端渲染时，先根据路由获取对应的组件，再调用组件.preFetch来获取数据
- 服务端获取完数据后，开始将数据写入全局state，并用
<script>标签的形式写进response - 渲染完毕后客户端拿到初始数据和SSR好的DOM，开始hydate检查是否有漏掉的操作没执行，执行完毕后结束流程
所以preFetch只是个约定好的接口的，你用其他名字也没毛病。
至于为毛要实现这个接口，因为在服务端环境中，拿到的不是组件实例而是组件的"构造函数"，导致根本就拿不到组件内的this，更别提methods和this.$store.state了，因此必须分离成在组件外部的一个接口，服务端直接调用这个接口并传入全局state即可。
我写过一些SSR的文章，有兴趣可以看一看
