<NuxtClientFallback>

Nuxt предоставляет компонент NuxtClientFallback для отображения его содержимого на клиенте, если какой-либо из его дочерних элементов вызывает ошибку в SSR.

<template>
  <div>
    <Sidebar />
    <!-- этот компонент будет отображаться на стороне клиента -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template>

События

• @ssr-error: Событие генерируется, когда дочерний элемент вызывает ошибку в SSR. Обратите внимание, что это будет запущено только на сервере.

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

Входные параметры

• placeholderTag | fallbackTag: Укажите резервный тег, который будет отображаться, если слот не будет отображаться на сервере.
  • тип: string
  • по умолчанию: div
• placeholder | fallback: Укажите резервный контент, который будет отображаться, если слот не может быть отображен.
  • тип: string
• keepFallback: Сохраните резервный контент, если его не удалось отобразить на стороне сервера.
  • тип: boolean
  • по умолчанию: 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>