๐ธ. Hydration์ด ์ด๋ ํ ๊ฐ๋ ์ธ์ง ์ค๋ช ํด์ฃผ์ค ์ ์๋์?
Hydration์ ๊ฒฝ์ฐ ์ฐ๋ฆฌ๋ง๋ก '์ํ'๋ผ๊ณ ํํํด์. '๋ฌผ์ ์ค์ ์ด์ดํ๊ฒ ๋ง๋ ๋ค' ์ ๋์ ์๋ฏธ๋ฅผ ๋ด๊ณ ์์ต๋๋ค. Next.js๋ฅผ ํ๋๋ฐ ๋ฌผ์ด ์ ๋์ค๊ณ ์ด์ดํ๊ฒ ๋ง๋ ๋ค๋ ๊ฒ ๋ฌด์จ ์๋ฏธ์ธ๊ฐ ์ถ์ผ์ค ๊ฑฐ์์. ์ฝ๊ฒ ์ดํดํ๊ฒ ๋ง๋๋ ค๊ณ ๋ง๋ ํํ์ธ๋ฐ ์คํ๋ ค ์ด๋ ต๊ฒ ๋๊ปด์ง์ฃ . Next.js์์ ์ง์ํ๋ Pre-rendering์ ์ฌ์ ๋ ๋๋ง์ด๋ผ๊ณ ๋ถ๋ฌ์. ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ )๊ฐ ์ฝ๋๋ฅผ ํด์ํ๊ธฐ ์ ์ ๋ฏธ๋ฆฌ ๋ ๋๋งํด๋๋ ๊ฒ์ด์ฃ . ๊ทธ ์ค ํ๋๊ฐ SSR, Server Side Redering(์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง)์ด์์. ์ด๋ ์๋ฒ์์ ๋ ๋๋งํ ์ฝ๋๋ HTML์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ด์. ์์๋ ๊ฒ์ฒ๋ผ HTML๋ง์ผ๋ก ๋์ ์ธ ๋์์ ์ํํ๊ธฐ ์ด๋ ค์์. ๊ทธ๋์ ์ ํฌ๊ฐ JavaScript๋ฅผ ์ด์ฉํด์ HTML์ ๋์ ์ผ๋ก ๋ง๋ค์ฃ . ์๋ฒ์์ ๋ง๋ค์ด์ง HTML์ JavaScript(React)๋ฅผ ์ ์ฉํ๋ ๊ฒ, ์ด๊ฑธ Hydration์ด๋ผ๊ณ ๋ถ๋ฌ์. ๋ ๋๋ง๋ ์ฝ๋๊ฐ HTML๋ง ์กด์ฌํ๋ค๋ฉด ๋ฉ๋ง๋ฅธ ์ํ, JavaScript(React)๊ฐ ์ ์ฉ๋๋ค๋ฉด ์ด์ดํ ์ํ๋ผ๊ณ ๋ณด๋๊ฑฐ์ฃ . ์ ๋ฆฌํ์๋ฉด ์๋ฒ์์ ์์ฑํ(๋ ๋๋งํ) HTML์ ์ ํฌ๊ฐ React๋ก ์์ฑํ JavaScript ์ฝ๋์ ๋งค์นญํด์ ์ด์ดํ๊ฒ(๋์ ์ผ๋ก) ๋ง๋๋ ๊ณผ์ ์ด Hydration์ด๋ผ๊ณ ์ดํดํ์๋ฉด ๋ ๊ฒ ๊ฐ์์. https://www.inflearn.com/questions/1042785/comment/289159