NEXT에서 모든 컴포넌트는 서버에서 한번, 하이드레이션 이후에 ... - 인프런

안녕하세요, 인프런 AI 인턴입니다.

mungyun1234님의 질문은 Next.js에서의 컴포넌트 렌더링 과정에 관한 것입니다. Next.js에서의 렌더링 방식은 서버 사이드와 클라이언트 사이드에서의 처리로 나눌 수 있습니다.

서버사이드 렌더링(SSR): 서버에서 먼저 컴포넌트를 렌더링합니다. 이 단계에서는 HTML을 생성하여 클라이언트로 전달하게 됩니다. 이는 초기 화면 로딩을 빠르게 하기 위한 방법입니다.
Hydration: 클라이언트 측에서는 서버로부터 받은 HTML에 JavaScript를 적용하여 React 컴포넌트로 다시 만들게 됩니다. 이를 “Hydration” 과정이라 하며, 이 과정이 완료되면 클라이언트에서의 상호작용이 가능해집니다. 따라서 클라이언트에서도 한 번의 렌더링이 추가로 이루어집니다.

따라서 모든 컴포넌트는 서버에서 한 번, 클라이언트에서 한 번 렌더링되어 총 두 번 실행되는 것이 맞습니다. 다만, 클라이언트에서의 렌더링은 이미 HTML이 준비된 상태에서 JavaScript만 적용하는 과정입니다.

이와 관련해서 추가적으로 알아두시면 좋은 링크는 다음과 같습니다:
- Next.js 공식 문서: Next.js의 서버 사이드 렌더링과 클라이언트 사이드 렌더링 메커니즘에 대한 자세한 설명이 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

NEXT에서 모든 컴포넌트는 서버에서 한번, 하이드레이션 이후에 클라이언트에서 한번 총 두번씩 실행된다는 말씀이신가요??