Hydration

Hydration은 Next js같은 SSR을 μ§€μ›ν•˜λŠ” ν”„λ ˆμž„μ›Œν¬λ₯Ό μ‚¬μš©ν•˜λ‹€ 보면 μˆ˜μ‹œλ‘œ μ ‘ν•˜λŠ” κ°œλ…μ΄λ‹€.

μš°λ¦¬κ°€ SSR 방식을 νƒν•˜μ—¬ λ Œλ”λ§μ„ μ§„ν–‰ν•˜κ²Œ 되면, μ„œλ²„μΈ‘μ—μ„œ λ Œλ”λ§μ— ν•„μš”ν•œ λͺ¨λ“  HTML, CSS λ“±μ˜ λ¦¬μ†ŒμŠ€λ₯Ό 응닡받아 pre-rendering을 μ§„ν–‰ν•œλ‹€.

ν•˜μ§€λ§Œ pre-rendering은 단지 μ„œλ²„μ—μ„œ λ°›μ•„μ˜¨ 정적인 λ¦¬μ†ŒμŠ€λ₯Ό ν† λŒ€λ‘œ μ§„ν–‰λ˜κΈ° λ•Œλ¬Έμ—, 이벀트λ₯Ό ν¬ν•¨ν•œ 동적인 νŽ˜μ΄μ§€κ°€ μ•„λ‹ˆλΌ 정적인 νŽ˜μ΄μ§€μΈ μƒνƒœμ΄λ‹€. κ°„λ‹¨νžˆ 말해 HTML만 μžˆλŠ” 깑톡 νŽ˜μ΄μ§€ μƒνƒœμΈ 것이닀.

λ”°λΌμ„œ 동적 νŽ˜μ΄μ§€ 생성을 μœ„ν•΄ JSλ₯Ό pre-rendering μƒνƒœμ— μ μš©μ‹œν‚€λŠ” 과정이 ν•„μš”ν•œλ° 이 과정이 λ°”λ‘œ Hydration이닀.

PreviousSuspenseNextVirtual DOM

Last updated