<NuxtClientFallback>

Nuxt 提供了 <NuxtClientFallback> 组件，用于在客户端的任何子项触发 SSR 错误时渲染其内容。

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

事件

• @ssr-error: 当子项在 SSR 中触发错误时发出的事件。请注意，这只在服务器上触发。

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

属性

• placeholderTag | fallbackTag: 指定一个回退标签，如果插槽未能在服务器上渲染，则渲染该标签。
  • 类型: string
  • 默认值: div
• placeholder | fallback: 指定回退内容，如果插槽未能在服务器上渲染，则渲染该内容。
  • 类型: string
• keepFallback: 保留回退内容，如果它在服务器端未能渲染。
  • 类型: boolean
  • 默认值: false

  <template>
    <!-- 如果默认插槽未能在服务器上渲染，则渲染 <span>Hello world</span> -->
    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
      <BrokeInSsr />
    </NuxtClientFallback>
  </template>

插槽

• #fallback: 指定内容，如果在服务器上插槽未能渲染，则显示该内容。

<template>
  <NuxtClientFallback>
    <!-- ... -->
    <template #fallback>
      <!-- 如果默认插槽在 SSR 中未能渲染，这将会在服务器上渲染 -->
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>