<NuxtClientFallback>

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>
  

Props

• placeholderTag | fallbackTag: 슬롯이 서버에서 렌더링되지 못할 경우 렌더링할 대체 태그를 지정합니다.
  • type: string
  • default: div
• placeholder | fallback: 슬롯이 렌더링되지 못할 경우 렌더링할 대체 콘텐츠를 지정합니다.
  • type: string
• keepFallback: 서버 사이드 렌더링에 실패했을 때 대체 콘텐츠를 유지할지 여부를 지정합니다.
  • type: boolean
  • default: 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>