useHydration

useHydration 은새로운 HTTP 요청이 이루어질 때마다 서버 측에서 데이터를 설정하고 클라이언트 측에서 해당 데이터를 수신하는 방법을 제공하는 내장형 컴포저블이다. useHydration 을 사용하면 하이드레이션 주기를 완전히 제어할 수 있다.

고급 컴포저블이며 대부분 내부적으로(useAsyncData) 또는 Nuxt 모듈에서 사용된다.

 

Type (Signature)

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

 

컴포저블, 플러그인, 컴포넌트 내에서 useHydration() 을 사용할 수 있다.

useHydration 세 가지 매개변수를 허용한다:

  • key : Nuxt 애플리케이션의 데이터를 식별하는 고유 키
    • type : String
  • get : 초기 데이터를 설정하기 위한 값을 반환하는 함수
    • type :Function
  • se t: 클라이언트 측에서 데이터를 수신하는 함수
    • type :Function

서버 측 함수 get 사용하여 초기 데이터가 반환되면 useHydration 컴포저블 의 첫 번째 매개변수로 전달된 고유 키를 사용하여 해당 nuxtApp.payload 내의 데이터에 액세스할 수 있다.

참고) Nuxt-개요 > 데이터 가져오기

'Nuxt 공식문서 번역 > Composables' 카테고리의 다른 글

useLazyFetch  (0) 2023.12.14
useLazyAsyncData  (0) 2023.12.14
useHead  (0) 2023.12.14
useHeadSafe  (0) 2023.12.13
useFetch  (0) 2023.12.13
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유