<NuxtIsland>
Nuxt는 <NuxtIsland> 컴포넌트를 제공하여 클라이언트 JS 없이 비인터랙티브 컴포넌트를 렌더링합니다.
아일랜드 컴포넌트를 렌더링할 때, 아일랜드 컴포넌트의 내용은 정적이므로 클라이언트 측에 JS가 다운로드되지 않습니다.
아일랜드 컴포넌트의 props가 변경되면 아일랜드 컴포넌트가 다시 렌더링되도록 다시 가져옵니다.
애플리케이션의 전역 스타일이 응답과 함께 전송됩니다.
서버 전용 컴포넌트는 내부적으로
<NuxtIsland>를 사용합니다Props
name: 렌더링할 컴포넌트의 이름.- type:
string - required
- type:
lazy: 컴포넌트를 논블로킹으로 만듭니다.- type:
boolean - default:
false
- type:
props: 렌더링할 컴포넌트에 전달할 props.- type:
Record<string, any>
- type:
source: 아일랜드를 렌더링하기 위해 호출할 원격 소스.- type:
string
- type:
- dangerouslyLoadClientComponents: 원격 소스에서 컴포넌트를 로드할 때 필요합니다.
- type:
boolean - default:
false
- type:
원격 아일랜드는
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: 서버 컴포넌트를 강제로 다시 가져와서 다시 렌더링합니다.
- type:
Events
error- parameters:
- error:
- type:
unknown
- type:
- error:
- description:
NuxtIsland가 새로운 아일랜드를 가져오지 못했을 때 발생합니다.
- parameters: