v3.17

<NuxtClientFallback>

Source (client)Source (server)
Nuxt 提供了 <NuxtClientFallback> 组件，用于在其任何子组件在服务器端渲染 (SSR) 中触发错误时，将其内容渲染到客户端。

Nuxt 提供 <NuxtClientFallback> 组件，当其任何子组件在服务端渲染 (SSR) 中触发错误时，它会在客户端渲染其内容。

¥Nuxt provides the <NuxtClientFallback> component to render its content on the client if any of its children trigger an error in SSR.

此组件处于实验阶段，要使用它，你必须在 nuxt.config 中启用 experimental.clientFallback 选项。¥This component is experimental and in order to use it you must enable the experimental.clientFallback option in your nuxt.config.
pages/example.vue
<template>
  <div>
    <Sidebar />
    <!-- this component will be rendered on client-side -->
    <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
  <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>

插槽

¥Slots

  • #fallback：指定在 slot 渲染失败时要在服务器端显示的内容。
<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>