<NuxtClientFallback>

ソース (クライアント)ソース (サーバー)
Nuxt は、子コンポーネントのいずれかが SSR でエラーをトリガーした場合に、そのコンテンツをクライアントでレンダリングするための <NuxtClientFallback> コンポーネントを提供します。

Nuxt は、子コンポーネントのいずれかが SSR でエラーをトリガーした場合に、そのコンテンツをクライアントでレンダリングするための <NuxtClientFallback> コンポーネントを提供します。

このコンポーネントは実験的なものであり、使用するには nuxt.config で experimental.clientFallback オプションを有効にする必要があります。
app/pages/example.vue
<template>
  <div>
    <Sidebar />
    <!-- this component will be rendered on client-side -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template>

イベント

  • @ssr-error: 子コンポーネントが SSR でエラーをトリガーしたときに発行されるイベントです。これはサーバー上でのみトリガーされることに注意してください。
    <template>
  <NuxtClientFallback @ssr-error="logSomeError">
    <!-- ... -->
  </NuxtClientFallback>
</template>

プロップス

  • placeholderTag | fallbackTag: スロットがサーバーでレンダリングに失敗した場合にレンダリングされるフォールバックタグを指定します。
    • type: string
    • デフォルト: div
  • placeholder | fallback: スロットのレンダリングに失敗した場合にレンダリングされるフォールバックコンテンツを指定します。
    • type: string
  • keepFallback: スロットのサーバーサイドでのレンダリングに失敗した場合でもフォールバックコンテンツを保持します。
    • 型: boolean
    • デフォルト: false
<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>

スロット

  • #fallback: スロットのレンダリングに失敗した場合にサーバーサイドで表示されるコンテンツを指定します。
<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>