Nuxtは、SSRで子要素がエラーを引き起こした場合に、その内容をクライアントでレンダリングするための<NuxtClientFallback>コンポーネントを提供します。

<template>
  <div>
    <Sidebar />
    <!-- このコンポーネントはクライアントサイドでレンダリングされます -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template>

イベント

• @ssr-error: 子要素がSSRでエラーを引き起こしたときに発生するイベント。このイベントはサーバーでのみ発生します。

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

プロパティ

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