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>