<NuxtClientFallback>

Nuxt 提供了 <NuxtClientFallback> 组件，当其任意子组件在 SSR 中触发错误时，在客户端渲染其内容。

该组件是实验性的，要使用它必须在你的 nuxt.config 中启用 experimental.clientFallback 选项。 :

<template>
  <div>
    <Sidebar />
    <!-- 该组件将在客户端渲染 -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template>

Events

• @ssr-error：当子组件在 SSR 中触发错误时发出的事件。注意这只会触发于服务端。

  <template>
    <NuxtClientFallback @ssr-error="logSomeError">
      <!-- ... -->
    </NuxtClientFallback>
  </template>
  

Props

• placeholderTag | fallbackTag：指定当插槽在服务端渲染失败时要渲染的回退标签。
  • 类型：string
  • 默认值：div
• placeholder | fallback：指定当插槽渲染失败时要渲染的回退内容。
  • 类型：string
• keepFallback：如果服务端渲染失败，保留回退内容。
  • 类型：boolean
  • 默认值：false

placeholder 和 fallback 属性以原始 HTML 形式渲染内容。不要将不受信任的用户输入传给这些属性，否则可能导致 XSS 漏洞。对于需要正确转义的动态内容，请改用 #fallback 或 #placeholder 插槽。 :

<template>
  <!-- 如果默认插槽渲染失败，在服务端渲染 <span>Hello world</span> -->
  <NuxtClientFallback
    fallback-tag="span"
    fallback="Hello world"
  >
    <BrokeInSSR />
  </NuxtClientFallback>
</template>

Slots

• #fallback：指定当插槽渲染失败时在服务端显示的内容。

<template>
  <NuxtClientFallback>
    <!-- ... -->
    <template #fallback>
      <!-- 如果默认插槽在 ssr 中渲染失败，这会在服务端渲染 -->
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>