Nuxt - island component

island component란?

island component는 페이지의 특정 부분만 클라이언트 측에서 동적으로 렌더링하고, 그 외의 부분은 서버에서 렌더링하는 방식을 말합니다.
Partial Hydration이라고도 표현하며, 성능 최적화를 위해 도입된 개념입니다.

Nuxt Hydration이란?

Nuxt의 기본 동작 방식은 SSR이기 때문에, 클라이언트에서 동적으로 렌더링될 부분을 지정함으로써 초기 로딩을 빠르게 할 수 있다는 장점이 있습니다.

예시

island component는 Nuxt에 내장되어 있으므로, 추가적인 설치는 필요하지 않습니다.

components/Counter.vue

<template>
  <div>
    <p>Current count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

위 파일을 island component로 사용해 보겠습니다.

pages/index.vue

<template>
  <div>
    <h1>Welcome to Our Site</h1>
    <Counter client:only />
    <p>This is a statically rendered page with a dynamic counter.</p>
  </div>
</template>

<script setup>
import Counter from '~/components/Counter.vue'
</script>

Counter 컴포넌트를 렌더링하는 페이지에서 client:only 속성을 부여한 것을 볼 수 있습니다. client:only 속성이 붙은 컴포넌트는 클라이언트 측에서만 렌더링되며, 서버 사이드에서는 이 부분을 렌더링하지 않고 넘어갑니다.