<NuxtClientFallback>

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

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