Question

Nuxt 提供了 NuxtClientFallback 组件，如果它的任何子组件在 SSR 中触发错误，则在客户端呈现其内容

这个组件是实验性的，为了使用它，你必须在你的 nuxt.config 中启用 experimental.clientFallback 选项。

Events

• @ssr-error：当某个子组件在服务端渲染期间触发了错误，这个事件就会被触发。需要注意的是，这个事件只会在服务端被触发，而不会在客户端触发。vue

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

Props

• placeholderTag | fallbackTag: 如果广告位无法呈现，请指定要呈现的回退标记。
  • type: string
  • default: div
• placeholder | fallback: 指定插槽无法呈现时要呈现的回退内容。
  • type: string

vue

  <template>
    <!-- 如果默认插槽无法呈现，则在服务器端呈现 <span>Hello world</span> -->
    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
      <BrokeInSsr />
    </NuxtClientFallback>
  </template>

Slots

• #fallback: 如果插槽无法呈现，则指定要在服务器端显示的内容。

vue

<template>
  <NuxtClientFallback>
    <!-- ... -->
    <template #fallback>
      <!-- 如果默认插槽无法在 ssr 中呈现，这将在服务器端呈现 -->
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>