<NuxtClientFallback>

하위 항목이 SSR에서 오류를 트리거하는 경우 클라이언트에 컨텐츠를 렌더링하기 위해 <NuxtClientFallback> 컴포넌트를 제공한다.

 

이 컴포넌트는 실험적이므로 사용하려면 nuxt.config 에서 experimental.clientFallback 옵션을 활성화해야한다.

 

Events

• @ssr-error : 하위 항목이 SSR에서 오류를 트리거할 때 발생하는 이벤트다. 서버에서만 트리거된다.

<template>
  <NuxtClientFallback @ssr-error="logSomeError">
    <!-- ... -->
  </NuxtClientFallback>
</template>

 

Props

• placeholderTag | fallbackTag : 슬롯이 렌더링되지 않는 경우 렌더링할 대체 태그를 지정한다.
  • type : string
  • default : div
• placeholder | fallback : 슬롯이 렌더링되지 않는 경우 렌더링할 대체 컨텐츠를 지정한다.
  • type : string
• keepFallback : 서버측 렌더링에 실패한 경우 데체 컨텐츠를 유지한다.
  •  type : boolean
  • default : 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 : 슬롯이 렌더링되지 않는 경우 서버측에서 표시할 컨텐츠를 지정한다.

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