如何使服务器/srr 仅呈现为 vue 组件？答案

【问题标题】：How to make a server/srr render only as vue components?如何使服务器/srr 仅呈现为 vue 组件？
【发布时间】：2019-10-30 04:42:42
【问题描述】：

我正在使用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)
  }
}

【问题讨论】：

我已经编辑了您的问题，以便更清楚地说明我认为您想问的问题。但是，我必须说，为什么您想要仅使用 SSR 组件对我来说没有多大意义。如果您使用 SSR，则一切都是服务器渲染的，除非您在应用程序中导航。在您刷新之前，仅 SSR 的组件将只是某种占位符……除非您将导航设置为静态链接，在这种情况下，您不需要对仅 SSR 的组件进行任何工作。
@Sumurai8 我想让它不会在客户端模式下显示，只有当使用 ssr 时才会渲染它，或者我们使用客户端模式，渲染上下文不会被客户端更新，将显示为预渲染来自 ssr 的上下文

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

【解决方案1】：

vue 懒人补水

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

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

【讨论】：