<NuxtIsland>

아일랜드 컴포넌트를 렌더링할 때 아일랜드 컴포넌트의 콘텐츠는 정적이므로 JS가 클라이언트 측에 다운로드되지 않는다.

 속성을 변경하면 아일랜트 컴포넌트를 다시 가져와 다시 렌더링하게 된다.

참고) 이 컴포넌트는 실험적이기 때문에, 사용하려면 nuxt.config 에서 experimental.componentIsland 활성화 시켜야한다.

 

어플리케이션의 전역스타일이 응답으로 전송된다.

 

서버 전용 컴포넌트는 <NuxtIsland> 를 내부적으로 사용한다.

 

Props

• name : 렌더링한 컴포넌트의 이름
  • type : string
  • 필수
• lazy : 컴포넌트를 Non-blocking 으로 만든다.
  • type : boolean
  • default : false
• props : 렌더링할 컴포넌트의 속성
  • type : Recode<string, any>
• source : 렌더링할 아일랜드를 호출하는 원격 소스
  • type : string

참고) 리모트 아일랜드는 nuxt.config 에 experimental.componentIsland 가 'local-remote' 로 설정되어야한다.

 

Slots

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

상위 컴포넌트가 이를 제공하는 컴포넌트이므로 모든 슬롯은 대화형이다.

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

• #fallback : 아일랜드가 로드되기 전(컴포넌트가 lazy 인 경우) 또는 NuxtIsland 가 컴포넌트 페치에 실패한 경우 렌더링할 콘텐츠를 지정한다.