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

Posted 2023-02-23

【中文标题】如何使服务器/srr 仅呈现为 vue 组件？

【英文标题】：How to make a server/srr render only as vue components?

【发布时间】：2019-10-30 04:42:42

【问题描述】：

我正在使用vue-no-s-s-r (https://github.com/egoist/vue-no-s-s-r)，但它创建的组件仅在客户端呈现。我想在服务器端渲染我的组件。有没有办法制作一个只在服务端渲染的vue组件？

我尝试使用下面vue-no-s-s-r的源代码，但我不明白如何熟练。

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-s-s-r-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)
  

【问题讨论】：

我已经编辑了您的问题，以便更清楚地说明我认为您想问的问题。但是，我必须说，为什么您想要仅使用 s-s-r 组件对我来说没有多大意义。如果您使用 s-s-r，则一切都是服务器渲染的，除非您在应用程序中导航。在您刷新之前，仅 s-s-r 的组件将只是某种占位符……除非您将导航设置为静态链接，在这种情况下，您不需要对仅 s-s-r 的组件进行任何工作。

@Sumurai8 我想让它不会在客户端模式下显示，只有当使用 s-s-r 时才会渲染它，或者我们使用客户端模式，渲染上下文不会被客户端更新，将显示为预渲染来自 s-s-r 的上下文

【参考方案1】：

vue 懒人补水

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

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