Nuxt proporciona el componente <NuxtClientFallback> para renderizar su contenido en el cliente si alguno de sus hijos genera un error en SSR.

<template>
  <div>
    <Sidebar />
    <!-- este componente se renderizará en el lado del cliente -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template>

Eventos

• @ssr-error: Evento emitido cuando un hijo genera un error en SSR. Ten en cuenta que esto solo se activará en el servidor.

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

Props

• placeholderTag | fallbackTag: Especifica una etiqueta de respaldo para renderizar si el slot no se puede renderizar en el servidor.
  • type: string
  • default: div
• placeholder | fallback: Especifica contenido de respaldo para renderizar si el slot no se puede renderizar.
  • type: string
• keepFallback: Mantener el contenido de respaldo si no se pudo renderizar en el lado del servidor.
  • type: boolean
  • default: false

  <template>
    <!-- renderizar <span>Hello world</span> en el lado del servidor si el slot predeterminado no se puede renderizar -->
    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
      <BrokeInSsr />
    </NuxtClientFallback>
  </template>

Slots

• #fallback: especifica contenido para mostrar en el lado del servidor si el slot no se puede renderizar.

<template>
  <NuxtClientFallback>
    {/* ... */}
    <template #fallback>
      {/* esto se renderizará en el lado del servidor si el slot predeterminado no se puede renderizar en ssr */}
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>