본문 바로가기
React & TypeScript

[TIL] Hydration 이란?

by 어느새벽 2024. 8. 20.

웹사이트는 두가지 방식으로 작동한다. 하나는 서버이고 하나는 클라이언트이다.

서버 : 웹사이트의 데이터를 저장하고, 웹사이트의 페이지를 제공해주는 역할

클라이언트 : 웹사이트를 보기 위해 사용하는 브라우저(크롬, 사파리 등)로 클라이언트는 서버에서 받은 데이터를 화면에 보여주는 역할

 

Hydration이란

리액트같은 프레임워크를 사용할 때, 서버에서 먼저 웹페이지를 만들고, 그 페이지를 클라이언트에 보낸다. 그러면 클라이언트는 그 페이지를 받아서 화면에 보여주고, 리액트가 그 페이지에 기능을 추가하여 클릭이나 스크롤 같은 인터랙션을 할 수 있게 해준다. 이 과정을 hydration이라고 한다.

 

Hydration Error

하이드레이션 오류는 서버에서 보낸 웹페이지와 클라이언트에서 그 페이지를 처리할 때 서로 다르면 발생한다. 다시 말해 서버가 보내준 페이지랑 클라이언트가 해석하는 방식이 다를 때 생기는 문제이다.