useHydration은 새로운 HTTP 요청이 있을 때마다 서버 측에서 데이터를 설정하고 클라이언트 측에서 해당 데이터를 수신할 수 있는 방법을 제공하는 내장 컴포저블입니다. 이를 통해 useHydration은 수화 사이클을 완전히 제어할 수 있게 합니다.

서버에서 get 함수로 반환된 데이터는 useHydration의 첫 번째 매개변수로 제공된 고유 키 아래 nuxtApp.payload에 저장됩니다. 수화 동안 이 데이터는 클라이언트에서 검색되어 중복 계산이나 API 호출을 방지합니다.

사용법

export default defineNuxtPlugin((nuxtApp) => {
  const myStore = new MyStore()

  if (import.meta.server) {
    nuxt.hooks.hook('app:rendered', () => {
      nuxtApp.payload.myStoreState = myStore.getState()
    })
  }

  if (import.meta.client) {
    nuxt.hooks.hook('app:created', () => {
      myStore.setState(nuxtApp.payload.myStoreState)
    })
  }
})

타입

useHydration <T> (key: string, get: () => T, set: (value: T) => void) => void

매개변수

• key: Nuxt 애플리케이션에서 데이터를 식별하는 고유 키입니다.
• get: 서버에서만 실행되는 함수로, SSR 렌더링이 완료되었을 때 초기 값을 설정합니다.
• set: 클라이언트에서만 실행되는 함수로, 초기 Vue 인스턴스가 생성될 때 데이터를 수신합니다.