SSR Hydration 원리
SSR(Server-side Rendering)
클라이언트의 매 요청마다 서버가 해당 페이지의 데이터와 리소스를 가져와서 HTML을 동적으로 생성
서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에게 전달하는 방식
🧐 서버에서 렌더링이 되어 클라이언트 컴포넌트로 보내는데, 서버 컴포넌트에서 prefetch 한 것을 클라이언트 컴포넌트에서 어떻게 받아오는 것일까?
서버에서 초기 데이터를 미리 가져와 페이지를 렌더링 할 수 있도록 getServerSideProps 또는 getStaticProps를 통해 데이터를 가져오고, 해당 데이터를 react query와 함께 클라이언트에 전달하여 ssr을 수행. 이 때 서버에서 데이터를 프리패칭하여 html에 포함시켜 클라이언트에 전달하게 된다
next.js는 서버에서 미리 렌더링된 페이지를 html 형태로 클라이언트에 보내면서, 서버에서 프리패칭한 데이터는 next_data 라는 스크립트 태그에 json 형태로 포함됨. 이 json 데이터에는 서버에서 가져온 프리패칭 데이터가 포함되어 있으며, 클라이언트에서 hydration이 일어날 때 이 데이터를 활용하게 됨
react query는 서버에서 가져온 데이터를 클라이언트에서 사용하기 위해 hydrate 컴포넌트를 사용하여 hydration을 처리한다. 서버에서 프래패칭한 데이터를 react query의 dehydrate 함수를 통해 직렬화하여 클라이언트로 전달한 후, 클라이언트에서는 hydrate 컴포넌트를 통해 react query 캐시에 서버 데이터를 바로 채워 넣음으로써 hydration을 수행
직렬화
react query 캐시 데이터를 직렬화하여 json 형식의 상태로 변환시킴
// 직렬화 예시
const user = {
name: "Alice",
age: 30,
};
// JSON으로 직렬화
const serializedUser = JSON.stringify(user); // 결과: '{"name":"Alice","age":30}'
// 역직렬화 예시
const deserializedUser = JSON.parse(serializedUser);