<NuxtIsland>

Source
Nuxt는 클라이언트 JS 없이 비대화형 컴포넌트를 렌더링하기 위해 <NuxtIsland> 컴포넌트를 제공합니다.

아일랜드 컴포넌트를 렌더링할 때, 아일랜드 컴포넌트의 내용은 정적이므로 클라이언트 측에서는 JS가 다운로드되지 않습니다.

아일랜드 컴포넌트의 props를 변경하면 아일랜드 컴포넌트를 다시 가져와 재렌더링합니다.

애플리케이션의 전역 스타일은 응답과 함께 전송됩니다.
서버 전용 컴포넌트는 내부적으로 <NuxtIsland>를 사용합니다

Props

  • name : 렌더링할 컴포넌트의 이름.
    • type: string
    • required
  • lazy: 컴포넌트를 논블로킹으로 만듭니다.
    • type: boolean
    • default: false
  • props: 렌더링할 컴포넌트에 전달할 props.
    • type: Record<string, any>
  • source: 아일랜드를 렌더링하기 위해 호출할 원격 소스.
    • type: string
  • dangerouslyLoadClientComponents: 원격 소스에서 컴포넌트를 로드하는 데 필요합니다.
    • type: boolean
    • default: false
원격 아일랜드는 nuxt.config에서 experimental.componentIslands가 'local+remote'여야 합니다. 원격 서버의 자바스크립트를 신뢰할 수 없으므로 dangerouslyLoadClientComponents를 활성화하는 것은 강력히 권장되지 않습니다.
기본적으로 컴포넌트 아일랜드는 ~/components/islands/ 디렉터리에서 스캔됩니다. 따라서 ~/components/islands/MyIsland.vue 컴포넌트는 <NuxtIsland name="MyIsland" />로 렌더링할 수 있습니다.

Slots

슬롯은 선언된 경우 아일랜드 컴포넌트에 전달할 수 있습니다.

각 슬롯은 부모 컴포넌트가 이를 제공하기 때문에 대화형입니다.

일부 슬롯은 특수한 경우를 위해 NuxtIsland에 예약되어 있습니다.

  • #fallback: (컴포넌트가 lazy인 경우) 아일랜드가 로드되기 전에 렌더링할 내용 또는 NuxtIsland가 컴포넌트를 가져오는 데 실패했을 때 렌더링할 내용을 지정합니다.

Ref

  • refresh()
    • type: () => Promise<void>
    • description: 서버 컴포넌트를 다시 가져와 강제로 재요청합니다.

Events

  • error
    • parameters:
      • error:
        • type: unknown
    • description: NuxtIsland가 새로운 아일랜드를 가져오는 데 실패했을 때 발생합니다.