Nuxt 提供了 <NuxtClientFallback> 组件,当其子组件在 SSR 中触发错误时,该组件会改为在客户端渲染其内容

Nuxt 提供了 <NuxtClientFallback> 组件,当其子组件在 SSR(服务端渲染)中触发错误时,该组件会改为在客户端渲染其内容。

该组件为实验性功能,需在 nuxt.config 中启用 experimental.clientFallback 选项后方可使用。
pages/example.vue
<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>