하이드레이션 질문 드립니다
CSR에서 비어있는 HTML을 파싱할 때 id="root" 엘리먼트를 만나면 리액트 앱을 마운트(JS 실행)하는 것과
SSR에서 서버에서 pre-render되어 생성된 HTML에 JS에 연결하는 과정인 하이드레이션은 어떤 차이가 있는건가요?
CSR에서 비어있는 HTML에 JS를 연결해서 실행시키는 것도 하이드레이션 아닌가? 하는 생각이 들었는데
비어있는 HTML과 서버에서 렌더링된 HTML의 데이터 존재 여부에 따라 다른건지,
아니면 CSR도 하이드레이션 과정을 수행하는지 궁금합니다.
답변 2
2
안녕하세요, 인프런 AI 인턴입니다.
반짝반짝한 두더지님, 하이드레이션과 관련된 질문에 답변 드립니다.
하이드레이션(Hydration)은 서버 사이드 렌더링(SSR)을 사용했을 때의 개념입니다. SSR에서는 서버에서 이미 생성된 HTML을 클라이언트에 전송하고, 클라이언트는 이 HTML을 바탕으로 페이지를 빠르게 렌더링한 다음, 해당 HTML에 JavaScript가 연결되어 상호작용 가능한 애플리케이션으로 만드는 과정을 말합니다.
CSR(Client-Side Rendering)은 서버에서 비어있는 HTML을 클라이언트에 전송하고, 클라이언트 측에서 모든 JavaScript를 로딩하여 애플리케이션을 마운트하는 방식입니다. 이 경우 애플리케이션의 첫 화면이 사용자에게 보여지기까지 시간이 필요하며, 그 과정에서 ‘하이드레이션’이라는 용어를 보통 사용하지 않습니다.
그러므로, SSR과 CSR에서의 주된 차이는 서버에서 미리 렌더링된 HTML을 받느냐, 비어있는 HTML을 받고 클라이언트에서 모든 렌더링을 처리하느냐에 있으며, 하이드레이션은 특히 SSR에서 서버로부터 받은 HTML에 JavaScript가 연결되어 완전한 상호작용이 가능한 상태가 되는 과정을 가리킵니다.
CSR도 기술적으로는 자바스크립트를 붙여 인터랙티브한 애플리케이션으로 만들어내지만, 일반적으로 그 과정을 ‘하이드레이션’이라고 부르지는 않습니다.
1
안녕하세요! 좋은 질문 남겨주셨는데 답변이 늦었습니다.
저보다 먼저 답변이 달린 AI 인턴의 답변으로 이해가 되셨을지도 모르겠네요. 조금 더 이해를 돕기 위해 React 공식 문서 링크를 남겨두겠습니다. (링크) createRoot, hydrateRoot에 대한 설명을 담고 있습니다.
정리하자면 id="root" 엘리먼트를 만나면 리액트 앱을 마운트(JS 실행)하는 것은 createRoot를 사용하고 SSR에서 서버에서 pre-render되어 생성된 HTML에 JS에 연결하는 것은 hydrateRoot를 사용한다고 이해하시면 될 것 같습니다. 어떻게 보면 하이드레이션이 그리 거창하지 않은 것이라고 생각해도 좋겠네요.
좋은 질문 감사합니다! 또 다른 질문 있으면 언제든 남겨주세요.
안녕하세요! 서비스 배포를 하는데 에러가 생겨서 문의드립니다!
1
543
1
안녕하세요 generateStaticParams 관해서 질문
0
366
2
next/image에 대한 질문
1
266
1
데이터 재검증 방법
1
277
2
next.js 에서 서버 컴포넌트 비중을 늘리는 이유
1
346
1
route.ts에 async 키워드가 필요한가요?
1
191
1
import 절대경로 설정 방법 질문 드립니다!
0
306
1
VSCode 확장프로그램은 어떤 것을 사용하셨나요?
0
338
1
환경변수 오류
1
243
1
프론트엔드가 Next를 이용하여 API 만드는 이유가 궁금합니다~!
3
734
1
generateStaticParams에 대하여 질문 드립니다~!
2
867
1
선생님 혹시 Next.js 13에서의 React-query는 어떻게 생각하실까요?
2
1946
3
클라이언트 컴포넌트는 SSG? SSR?
2
859
2
SSR과 RSC의 차이점에 관하여 질문이 있습니다.
1
1287
1
nextjs의 14버전에서 data fetch
1
1422
1
비동기 호출, fetch, 라우트 핸들러 관련 질문입니다.
1
427
1
revalidate 질문
1
479
1
섹션3. 날씨 재검증하기 NextRequest 질문입니다.
1
337
1
메타데이터 관련 질문
0
214
1
비동기 호출 관련 질문있습니다!
2
327
1
Revalidate 부분 질문
0
345
1
서버 컴포넌트 관련 질문입니다!
3
1689
5
Data Fetching 관련 질문 있습니다~
2
520
1
useRouter 를 import 할때 next/router만 뜨는 경우
0
611
2