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