Nuxt CNode：Node.js专业中文社区

请问vuejs ssr是怎么把异步的数据获取并渲染出来的

发布于 9 年前作者 bjdfs 12565 次预览最后一次回复是 9 年前来自问答

官网的HN2.0例子中用了vuex，因为我还不懂vuex，所以写的demo里边没有用这个，然后问题就是我从firebase获取的数据不能做到服务端渲染，每次我渲染出来返回的html都没有从接口获取来的数据，我的理解是因为接口是异步获取的，所以渲染不出来，可是为毛官网的例子也是从接口获取的数据可以通过服务端渲染？

6 回复

i5ting

1楼•9 年前

  const context = { url: req.url }
  const renderStream = renderer.renderToStream(context)

bjdfs

2楼•9 年前

谢谢回复哈我也是这么写的，可是我渲染出来的html没有接口返回的内容，我在网上搜到prefetch这个关键字，可还是不太明白

// 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
  })
}

你说的是这个吧

Smallpath

5楼•9 年前

在组件内实现一个preFetch接口，用来获取组件想要的数据
服务端渲染时，先根据路由获取对应的组件，再调用组件.preFetch来获取数据
服务端获取完数据后，开始将数据写入全局state，并用<script>标签的形式写进response
渲染完毕后客户端拿到初始数据和SSR好的DOM，开始hydate检查是否有漏掉的操作没执行，执行完毕后结束流程

所以preFetch只是个约定好的接口的，你用其他名字也没毛病。

至于为毛要实现这个接口，因为在服务端环境中，拿到的不是组件实例而是组件的"构造函数"，导致根本就拿不到组件内的this，更别提methods和this.$store.state了，因此必须分离成在组件外部的一个接口，服务端直接调用这个接口并传入全局state即可。

我写过一些SSR的文章，有兴趣可以看一看

leaves4j

6楼•9 年前

https://github.com/leaves4j/vue-easy-renderer