Nuxt는 자식 컴포넌트 중 하나라도 SSR에서 에러를 발생시키는 경우, 클라이언트에서 해당 내용을 렌더링하기 위한 <NuxtClientFallback> 컴포넌트를 제공합니다.
<template>
<div>
<Sidebar />
<!-- 이 컴포넌트는 클라이언트 사이드에서 렌더링됩니다 -->
<NuxtClientFallback fallback-tag="span">
<Comments />
<BrokeInSSR />
</NuxtClientFallback>
</div>
</template>
@ssr-error: 자식이 SSR에서 에러를 발생시켰을 때 발생하는 이벤트입니다. 이는 서버에서만 트리거된다는 점에 유의하세요.<template>
<NuxtClientFallback @ssr-error="logSomeError">
<!-- ... -->
</NuxtClientFallback>
</template>
placeholderTag | fallbackTag: 슬롯이 서버에서 렌더링되지 못했을 때 렌더링할 폴백 태그를 지정합니다.
stringdivplaceholder | fallback: 슬롯이 렌더링되지 못했을 때 렌더링할 폴백 콘텐츠를 지정합니다.
stringkeepFallback: 서버 사이드 렌더링에 실패했을 경우 폴백 콘텐츠를 유지할지 여부입니다.
booleanfalse<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>