---
title: "<NuxtClientFallback>"
description: "Nuxt provides `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR"
---

# `<NuxtClientFallback>`

Nuxt provides a `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.

::alert{type=warning}
This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
::

## Events

- **`@ssr-error`**: Event emitted when a child triggers an error in SSR. Note that this will only be triggered on the server.

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

## Props

- **placeholderTag** | **fallbackTag**: Specify a fallback tag to be rendered if the slot fails to render.
  - **type**: `string`
  - **default**: `div`
- **placeholder** | **fallback**: Specify fallback content to be rendered if the slot fails to render.
  - **type**: `string`
- **keepFallback**: Keep the fallback content if it failed to render server-side.
  - **type**: `boolean`
  - **default**: `false`

```vue
  <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**: specify content to be displayed server-side if the slot fails to render.

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