<NuxtClientFallback>

Nuxt 提供 <NuxtClientFallback> 组件，如果其任何子组件在 SSR 中触发错误，则在客户端渲染其内容

Nuxt 提供 <NuxtClientFallback> 组件，如果其任何子组件在 SSR 中触发错误，则在客户端渲染其内容。

此组件是实验性的，要使用它，您必须在 nuxt.config 中启用 experimental.clientFallback 选项。 ::

app/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>

Props

placeholderTag | fallbackTag: 指定如果插槽在服务器上渲染失败时要渲染的回退标签。
- 类型: string
- 默认值: div
placeholder | fallback: 指定如果插槽渲染失败时要渲染的回退内容。
- 类型: string
keepFallback: 如果在服务器端渲染失败，则保留回退内容。
- 类型: boolean
- 默认值: false

placeholder 和 fallback props 将内容渲染为原始 HTML。不要将不受信任的用户输入传递给这些 props，因为这可能导致 XSS 漏洞。对于需要正确转义的动态内容，请使用 #fallback 或 #placeholder 插槽。

<template>
  <!-- 如果默认插槽渲染失败，则在服务器端渲染 <span>Hello world</span> -->
  <NuxtClientFallback
    fallback-tag="span"
    fallback="Hello world"
  >
    <BrokeInSSR />
  </NuxtClientFallback>
</template>

Slots

#fallback: 指定如果插槽渲染失败时要显示的服务器端内容。

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

报告问题或在 GitHub 上编辑此页面

使用 <DevOnly> 组件仅在开发期间渲染组件。

<NuxtPage> 组件用于显示位于 pages/ 目录中的页面。