如何使 server/srr 仅呈现为 vue 组件？

Question

我正在使用vue-no-ssr ( https://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)
  }
}

Answer 1

vue-lazy-hydration

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

看起来可以做 ssr-only when-idle when-visible ......等等