<NuxtClientFallback> · Nuxt 組件

如果任何子元件在伺服器端渲染 (SSR) 時觸發錯誤，Nuxt 提供 <NuxtClientFallback> 元件在客戶端渲染其內容。

此元件為實驗性質，若要使用它，您必須在您的 nuxt.config 中啟用 experimental.clientFallback 選項。

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>

使用 <DevOnly> 元件僅在開發期間渲染元件。

需要 <NuxtPage> 元件來顯示位於 pages/ 目錄中的頁面。