renderToStream: first chunk too big cause vue-meta can't get correct meta info of child components

[jiangfengming]

In stream.once('data', ...), if the first chunk is too big, the following child components haven't been created at the moment, so their metaInfo won't have effects.

Github: https://github.com/fenivana/vue-meta-streaming-issue

Run in node.js:

const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const VueMeta = require('vue-meta')

Vue.use(VueMeta)

const vm = new Vue({
  metaInfo: {
    title: 'root'
  },

  template: `
    <div>
      ${'a'.repeat(100000)}
      <foo/>
    </div>
  `,

  components: {
    foo: {
      metaInfo: {
        title: 'foo'
      },
      template: '<div>foo</div>'
    }
  }
})

const stream = renderer.renderToStream(vm)

stream.once('data', () => {
  // BUG: title is 'root'. SHOULD be 'foo'
  console.log(vm.$meta().inject().title.text())
})

[Atinux]

Hi @fenivana

Thank you for this bug report, actually the only workaround I found is this one:

const stream = renderer.renderToStream(vm)

let head = ''
let html = ''

stream.on('data', (data) => {
  html += data.toString()
})

stream.on('end', () => {
  head += vm.$meta().inject().title.text()
  console.log(head, html)
})

Sadly it seems more a bug related to vue-server-renderer instead of vue-meta.

In the meantime, you can use renderToString.

[pimlie]

Closing this issue as its an upstream caveat and the vue ssr docs explicitly warn against this behaviour: Streaming Caveats