<NuxtIsland>

源码
Nuxt 提供了 <NuxtIsland> 组件，用于在不下载任何客户端 JS 的情况下渲染非交互式组件。

在渲染 island 组件时，island 组件的内容是静态的，因此客户端不会下载任何 JS。

更改 island 组件的 props 会触发对该 island 组件的重新获取以再次渲染它。

应用的全局样式会随响应一起发送。
仅服务端组件在底层使用 <NuxtIsland>。

Props

  • name : 要渲染的组件名称。
    • type: string
    • required
  • lazy: 将组件设为非阻塞。
    • type: boolean
    • default: false
  • props: 传递给渲染组件的 props。
    • type: Record<string, any>
  • source: 调用要渲染的 island 的远程来源。
    • type: string
  • dangerouslyLoadClientComponents: 从远程来源加载组件时所必需。
    • type: boolean
    • default: false
远程 islands 需要在你的 nuxt.config 中将 experimental.componentIslands 设置为 'local+remote'。
使用 source prop 从远程服务器渲染内容本质上是危险的。当你指定远程 source 时，你完全信任该服务器提供安全的 HTML 内容，这些内容会直接渲染到你的应用中。这类似于使用带有外部内容的 v-html ——远程服务器可以注入任意 HTML，包括潜在的恶意内容。请仅在完全信任和控制的服务器上使用 source。dangerouslyLoadClientComponents prop 控制另一层风险：是否也从远程来源下载并执行客户端组件。即使禁用 dangerouslyLoadClientComponents（默认值），你仍然信任远程服务器的 HTML 输出。
Component props and context are sent as GET query parameters to enable caching. Query parameters may be visible in server access logs, CDN caches, and HTTP Referer headers.
默认情况下，会从 ~/components/islands/ 目录扫描组件 islands。因此 ~/components/islands/MyIsland.vue 组件可以通过 <NuxtIsland name="MyIsland" /> 来渲染。

Slots

如果声明了插槽（slot），则可以将插槽传递给 island 组件。

每个插槽都是交互式的，因为父组件是提供它的那一方。

有些插槽为 NuxtIsland 保留以处理特殊情况。

  • #fallback: 指定在 island 加载之前（如果组件为 lazy）或 NuxtIsland 无法获取组件时要渲染的内容。

Ref

  • refresh()
    • type: () => Promise<void>
    • description: 通过重新获取来强制重新拉取服务端组件。

Events

  • error
    • parameters:
      • error:
        • type: unknown
    • description: 当 NuxtIsland 无法获取新的 island 时触发。