인프런 커뮤니티 질문&답변
작성한 질문수
gpt에게 물어보니 client컴포넌트는 서버에서 실행되지 않고 hydrate할 공간이라고 예약만 한다고 하네요??
해결된 질문
작성
·
45
0
제목과 같습니다
클라이언트 컴포넌트는 서버에서 함수가 아예 실행되지 않고 빈영역의 HTML을 건네주며, FCP 때의 ui는 모두 서버 컴포넌트 또는 정적 페이지라고 이해했는데 사실인가요??
답변 2
1
안녕하세요 이정환입니다.
그렇지 않습니다. 만약 실제로 그렇다면 서버측에서는 클라이언트 컴포넌트를 실행할 수 없으니 서버측에서 완성된 HTML 페이지를 생성하는 사전 렌더링 기능 자체가 동작하지 않겠죠
아마 이 설명은 Next.js 앱 라우터 상의 이야기가 아니라 React.js에서 서버 컴포넌트만 사용했을 때의 이야기에 해당 되는 것 같습니다.
아래는 Next.js 공식 문서에 서술되어 있는 클라이언트 컴포넌트의 동작 방식입니다. 드래그 한 부분을 읽어보시면 클라이언트 컴포넌트와 RSC Payload는 HTML을 사전 렌더링 하기 위해 사용된다(실행된다) 라고 나와 있네요
GTP의 답변은 항상 교차 검증이 필요합니다. 아무래도 최근에 업데이트 된 기능이다보니 환각 현상이 일어나는 것 같습니다. 저도 강의와 도서를 제작할 때에 가끔 물어보곤 했는데 페이지 라우터와 혼동하는 개념도 많고, 이상한 대답을 내놓는 경우가 많더군요 ㅋㅋ
0
안녕하세요, 인프런 AI 인턴입니다.
mungyun1234님께서 Next.js의 클라이언트 컴포넌트와 서버 컴포넌트 간의 동작 방식에 대해 질문하신 부분에 대해 답변드리겠습니다. 이와 관련하여 다음과 같은 유사 질문들을 참고할 수 있습니다.
클라이언트와 서버 컴포넌트의 렌더링 차이: 클라이언트 컴포넌트는 기본적으로 브라우저에서 실행되며, 서버에서는 초기 HTML 마크업만 제공하는 형식입니다. 즉, 클라이언트 컴포넌트의 실제 로직은 브라우저에서 실행됩니다. 이와 관련한 동작 방식에 대한 자세한 설명은 클라이언트 컴포넌트가 서버에서 어떻게 렌더링되는지 궁금합니다! 질문에서 확인할 수 있습니다.
Hydration 과정: 서버에서 클라이언트 컴포넌트에 대해 HTML 영역을 마련해주고, 실제 인터랙티브한 기능은 브라우저에서 JavaScript 번들이 로드되면 동작합니다. 이 과정을 Hydration이라 하며, 이는 Pre-Rendering 과정에 대해서 질문드립니다! 질문에서 자세히 설명되어 있습니다.
이전 질문들을 통해, Next.js에서의 클라이언트 및 서버 컴포넌트 동작 방식을 보다 명확히 이해할 수 있습니다. 클라이언트 컴포넌트는 브라우저에서 인터랙티브 기능을 담당하며, 서버 측에서는 주로 초기 HTML을 제공하는 역할에 집중합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.