onPrehydrate

onPrehydrate를 사용하여 Nuxt가 페이지를 하이드레이트하기 직전에 클라이언트에서 콜백을 실행합니다.

이 컴포저블은 Nuxt v3.12+에서 사용할 수 있습니다.

onPrehydrate는 Nuxt가 페이지를 하이드레이트하기 직전에 클라이언트에서 콜백을 실행할 수 있게 해주는 컴포저블 라이프사이클 훅입니다.

이것은 고급 유틸리티이며 주의해서 사용해야 합니다. 예를 들어, nuxt-time과 @nuxtjs/color-mode는 하이드레이션 불일치를 피하기 위해 DOM을 조작합니다.

사용법

Vue 컴포넌트의 setup 함수(예: <script setup> 내) 또는 플러그인에서 onPrehydrate를 호출하세요. 서버에서 호출될 때만 효과가 있으며, 클라이언트 빌드에는 포함되지 않습니다.

타입

Signature

export function onPrehydrate(callback: (el: HTMLElement) => void): void
export function onPrehydrate(callback: string | ((el: HTMLElement) => void), key?: string): undefined | string

매개변수

매개변수	타입	필수	설명
`callback`	`((el: HTMLElement) => void) \| string`	예	Nuxt가 하이드레이트하기 전에 실행할 함수(또는 문자열화된 함수)입니다. HTML에 문자열화되어 인라인됩니다. 외부 종속성이나 콜백 외부의 변수를 참조해서는 안 됩니다. Nuxt 런타임이 초기화되기 전에 실행되므로 Nuxt나 Vue 컨텍스트에 의존해서는 안 됩니다.
`key`	`string`	아니오	(고급) 프리하이드레이트 스크립트를 식별하기 위한 고유 키로, 여러 루트 노드와 같은 고급 시나리오에 유용합니다.

반환 값

콜백 함수만으로 호출될 때 undefined를 반환합니다.
콜백과 키로 호출될 때 문자열(프리하이드레이트 ID)을 반환하며, 이는 고급 사용 사례를 위해 data-prehydrate-id 속성을 설정하거나 접근하는 데 사용할 수 있습니다.

예제

app.vue

<script setup lang="ts">
declare const window: Window
// ---cut---
// Nuxt가 하이드레이트하기 전에 코드 실행
onPrehydrate(() => {
  console.log(window)
})

// 루트 요소 접근
onPrehydrate((el) => {
  console.log(el.outerHTML)
  // <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> Hi there </div>
})

// 고급: `data-prehydrate-id`를 직접 접근/설정
const prehydrateId = onPrehydrate((el) => {})
</script>

<template>
  <div>
    Hi there
  </div>
</template>

※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.

공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/composables/on-prehydrate