<NuxtClientFallback>

來源（客戶端）來源（伺服器）
Nuxt 提供了 <NuxtClientFallback> 元件，如果其任何子元件在 SSR 中觸發錯誤，則會在客戶端渲染其內容

Nuxt 提供了 <NuxtClientFallback> 元件，如果其任何子元件在 SSR 中觸發錯誤，則會在客戶端渲染其內容。

此元件是實驗性的，要使用它，您必須在 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: 指定一個備用標籤，如果插槽在伺服器上渲染失敗則渲染該標籤。
    • 型別：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>