[Next.js][Error🐞] Runtime Error: Hydration failed because the initial UI does not match what was rendered on the server.

ljw4536Β·2023λ…„ 3μ›” 26일


λͺ©λ‘ 보기

λ©°μΉ  μ „, μž‘μ€ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ°œλ°œν•΄λ³΄κ³ μž Next.js μ—μ„œ μ œκ³΅ν•˜λŠ” 무료 μ›Ή ν…œν”Œλ¦Ώμ„ λ‹€μš΄λ°›μ•„μ„œ 개발 진행을 ν•˜λŠ” 쀑 μ•„λž˜μ™€ 같은 μ—λŸ¬κ°€ λ°œμƒν•˜μ˜€λ‹€.

Error 뢄석

Error: Hydration failed because the initial UI does not match what was rendered on the server.

해석 : *Hydration μž‘μ—…μ„ μ‹€νŒ¨ν•˜μ˜€μŠ΅λ‹ˆλ‹€. κ·Έ 원인은 첫 번째 UIκ°€ μ„œλ²„μ—μ„œ render된 것과 λ§€μΉ­λ˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

Next.js 곡식 λ¬Έμ„œμ— λ”°λ₯΄λ©΄ 이 였λ₯˜λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ rendering ν•˜λŠ” λ™μ•ˆ 미리 rendered 된 React tree(SSR/SSG)와 λΈŒλΌμš°μ €μ—μ„œ 첫 번째 rendering 쀑에 rendered 된 React tree 간에 차이가 λ°œμƒν–ˆκΈ° λ•Œλ¬Έμ΄λ‹€.
이 μ—λŸ¬λŠ” React treeκ°€ DOMEκ³Ό λ™κΈ°ν™”λ˜μ§€ μ•Šμ•„ 예기치 μ•Šμ€ μ½˜ν…μΈ  λ˜λŠ” 속성이 λ‚˜νƒ€λ‚  수 μžˆλ‹€λŠ” 것을 μ•”μ‹œν•œλ‹€.

*Hydration μ΄λž€?

ν•œ λ§ˆλ””λ‘œ Componentλ₯Ό rendering ν•˜κ³  event handler λ₯Ό μ—°κ²°ν•˜λŠ” ν”„λ‘œμ„ΈμŠ€μ΄λ‹€.
React의 κΈ°λŠ₯ 쀑 ν•˜λ‚˜μΈ hydrate(element, container[, callback])λŠ” render() λ©”μ„œλ“œμ™€ κΈ°λŠ₯μ μœΌλ‘œλŠ” λ™μΌν•˜μ§€λ§Œ, ReactDOMServer 에 μ˜ν•΄ λ Œλ”λ§ 된 HTML contentsλ₯Ό μ§€μΉ­ν•˜λŠ” container을 hydrate ν•˜λŠ”λ° μ‚¬μš©λœλ‹€.

Warning: Expected server HTML to contain a matching <div> in <p>.

해석: <p> νƒœκ·Έ 내뢀에 <div> νƒœκ·Έκ°€ λ§€μΉ­λ˜λŠ” DOM tree ꡬ쑰가 server HTML에 포함될 κ²ƒμœΌλ‘œ μ˜ˆμƒλ©λ‹ˆλ‹€.

이것은 ν˜„μž¬ ν”„λ‘œμ νŠΈ μ½”λ“œλ“€ 쀑, <p> νƒœκ·Έ 내뢀에 child element 둜 <div> κ°€ μ •μ˜λ˜λŠ” 뢀뢄이 μžˆμ–΄μ„œ λ°œμƒν•˜λŠ” κ²½κ³  문ꡬ이닀. 이 Warning μ—λŸ¬λŠ” Hydration μ—λŸ¬ λ°œμƒ 원인을 λœ»ν•˜λŠ” 것 κ°™μ•˜λ‹€.

Error ν•΄κ²° 방법

λ”°λΌμ„œ, λ‚˜λŠ” Next.js 의 곡식 λ¬Έμ„œμ—μ„œ μ œμ•ˆν•œλŒ€λ‘œ <p> 내뢀에 <div>κ°€ μ •μ˜λ˜μ–΄ μžˆλŠ” μ½”λ“œλ₯Ό μ°Ύμ•„μ„œ λ‹€μŒκ³Ό 같이 μˆ˜μ •ν•˜μ˜€λ”λ‹ˆ, λ§λ”ν•˜κ²Œ μ—λŸ¬κ°€ ν•΄κ²°λ˜μ—ˆλ‹€.

참고둜 about() ν•¨μˆ˜λŠ” μ•„λž˜μ™€ 같이 return λ˜λŠ” jsx μ΅œμƒμœ„ νƒœκ·Έκ°€ <>...</> 즉, <div> μ΄μ—ˆλ‹€.


  • <p> νƒœκ·Έ μ•ˆμ— <div> 와 같은 λΈ”λŸ­ ν˜•νƒœ νƒœκ·Έ λ„£λŠ” 것을 μ§€μ–‘ν•˜μž
  • Hydration μ΄λž€ Componentλ₯Ό rendering ν•˜κ³  event handlerλ₯Ό μ—°κ²°ν•˜λŠ” ν”„λ‘œμ„ΈμŠ€μ΄λ‹€.
맀일 0.1%μ”© μ„±μž₯ν•˜λŠ” Junior Web Front-end Developer πŸ’»πŸ”₯

0개의 λŒ“κΈ€