如何使服务器/ srr仅作为vue组件呈现?

时间:2019-06-16 07:14:51

标签: javascript node.js typescript vue.js vue-component

我正在使用vue-no-ssrhttps://github.com/egoist/vue-no-ssr),但是它创建的组件只能在客户端渲染。我想在服务器端渲染我的组件。有什么方法可以制作仅在服务器上呈现的Vue组件?

我尝试使用下面的vue-no-ssr的源代码,但我不知道如何使用它。

export default {
  name: 'NoSsr',
  functional: true,
  props: {
    placeholder: String,
    placeholderTag: {
      type: String,
      default: 'div'
    }
  },
  render(h, { parent, slots, props }) {
    const { default: defaultSlot = [], placeholder: placeholderSlot } = slots()

    if (parent._isMounted) {
      return defaultSlot
    }

    parent.$once('hook:mounted', () => {
      parent.$forceUpdate()
    })

    if (props.placeholderTag && (props.placeholder || placeholderSlot)) {
      return h(
        props.placeholderTag,
        {
          class: ['no-ssr-placeholder']
        },
        props.placeholder || placeholderSlot
      )
    }

    // Return a placeholder element for each child in the default slot
    // Or if no children return a single placeholder
    return defaultSlot.length > 0 ? defaultSlot.map(() => h(false)) : h(false)
  }
}

1 个答案:

答案 0 :(得分:0)

vue-lazy-hydration

https://github.com/maoberlehner/vue-lazy-hydration

看起来只有在空闲的时候才能进行ssr-running-visible ...等等