Nuxt fornece o componente <NuxtClientFallback> para renderizar seu conteúdo no cliente se algum de seus filhos disparar um erro no SSR.

<template>
  <div>
    <Sidebar />
    <!-- este componente será renderizado no lado do cliente -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template>

Eventos

• @ssr-error: Evento emitido quando um filho dispara um erro no SSR. Note que isso só será disparado no servidor.

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

Props

• placeholderTag | fallbackTag: Especifica uma tag de fallback a ser renderizada se o slot falhar ao renderizar no servidor.
  • tipo: string
  • padrão: div
• placeholder | fallback: Especifica conteúdo de fallback a ser renderizado se o slot falhar ao renderizar.
  • tipo: string
• keepFallback: Mantém o conteúdo de fallback se ele falhar ao renderizar no lado do servidor.
  • tipo: boolean
  • padrão: false

  <template>
    <!-- renderiza <span>Hello world</span> no lado do servidor se o slot padrão falhar ao renderizar -->
    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
      <BrokeInSsr />
    </NuxtClientFallback>
  </template>

Slots

• #fallback: especifica o conteúdo a ser exibido no lado do servidor se o slot falhar ao renderizar.

<template>
  <NuxtClientFallback>
    {/* ... */}
    <template #fallback>
      {/* isso será renderizado no lado do servidor se o slot padrão falhar ao renderizar no ssr */}
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>