通过 100+ 个技巧学习 Nuxt!
Nuxt 提供了 <NuxtClientFallback> 组件,以便在其任何子组件在 SSR 中触发错误时在客户端渲染其内容

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

此组件是实验性的,为了使用它,您必须在 nuxt.config 中启用 experimental.clientFallback 选项。
pages/example.vue
<template>
  <div>
    <Sidebar />
    <!-- this component will be rendered on client-side -->
    <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>
    <!-- render <span>Hello world</span> server-side if the default slot fails to render -->
    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
      <BrokeInSsr />
    </NuxtClientFallback>
  </template>

插槽

  • #fallback:指定如果插槽渲染失败,则在服务器端显示的内容。
<template>
  <NuxtClientFallback>
    <!-- ... -->
    <template #fallback>
      <!-- this will be rendered on server side if the default slot fails to render in ssr -->
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>