서버 HTML과 클라이언트 hydration이 같은 초기 결과를 가져야 함을 이해합니다.
Nuxt는 서버에서 HTML을 만들고 브라우저에서 Vue가 이벤트를 연결합니다. 서버와 클라이언트의 첫 렌더가 다르면 hydration mismatch가 발생합니다.
현재 시간, 난수, 브라우저 전용 저장소는 onMounted 이후 읽거나 서버에서 고정된 값을 전달합니다.
HTML 문법 오류로 브라우저가 구조를 보정해도 mismatch가 생길 수 있습니다.
템플릿에서 Math.random이나 Date.now를 직접 호출해 서버와 브라우저 결과를 다르게 만들지 마세요.
로컬 프로젝트에서 확인해보세요mounted 이후에만 브라우저 시간을 표시하세요.
<script setup>
const mounted = ref(false);
onMounted(() => (mounted.value = true));
</script>
<template>
<main>
<h1>Hydration 안전 화면</h1>
<p v-if="mounted">브라우저 상호작용 준비 완료</p>
<p v-else>서버 렌더링 결과</p>
</main>
</template>