서버컴포넌트를 children으로 사용해도, 브라우저에서 출력이 되는 것 같습니다.

Question

3.5) 리액트 서버 컴포넌트 주의사항
강의의 12분 쯤

- 서버 컴포넌트를 클라이언트 컴포넌트의 children props로 사용하면, 브라우저에서 서버컴포넌트가 렌더링 되지 않는 걸 보여주는 예시에서요.

(with-searchbar)/page.tsx1

(with-searchbar)/client-component.tsx

(with-searchbar)/server-component.tsx

현재 잘 따라한거 같은데, 서버 컴포넌트가 브라우저에 출력이 되더라구요.

서버 컴포넌트로서 출력이 된거 같긴한데.

브라우저에서 서버 컴포넌트가 보이면 안되는 거 아닌가 싶은데, 현재 next 15.3 이라서 그런건가 싶기도 하구요!

이정환 Winterlood · Answer

안녕하세요 이정환입니다.

먼저 출력된 콘솔 메세지의 좌측을 보시면 "server" 라고 되어 있는걸 보실 수 있는데요, 이는 Next.js 앱과 브라우저에서 개발 도중에 로그를 더 쉽게 살펴볼 수 있도록 서버측 콘솔을 브라우저에도 띄워주는 기능입니다. 실제로 배포를 목적으로 프로덕션으로 앱을 가동하시면 해당 메세지는 브라우저에서는 확인할 수 없게 됩니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 최지호님.

Next.js에서 클라이언트 컴포넌트와 서버 컴포넌트 간의 상호작용과 렌더링에 대해 살펴보겠습니다.

서버 컴포넌트와 클라이언트 컴포넌트

서버 컴포넌트는 서버에서 렌더링되어 HTML로 전달되며, 클라이언트에서의 작업이 불필요합니다. 서버 컴포넌트는 클라이언트에서 직접적으로는 사용되지 않기 때문에 주로 데이터를 불러와 그 결과를 클라이언트 컴포넌트로 전달합니다.
클라이언트 컴포넌트는 클라이언트 사이드에서 작업이 필요한 경우 주로 사용됩니다. 서적, 상태 관리, 이벤트 핸들링 등을 담당합니다.

왜 브라우저에 서버 컴포넌트가 출력되는지?

Next.js의 버전 13 이상에서는 서버와 클라이언트 컴포넌트를 혼합하여 사용할 수 있습니다. 현재 문제는 클라이언트 컴포넌트 내에서 서버 컴포넌트를 Children으로 사용했을 때 발생하는 것으로 보입니다. 이는 서버 컴포넌트가 클라이언트에서 직접 JavaScript로 로딩되거나 로깅되는 상황일 수 있습니다.

다음의 점들로 접근해볼 수 있습니다:
- 서버 컴포넌트의 로깅: 로그 메시지가 클라이언트 콘솔에 나타난다면, 이는 서버에서 해당 컴포넌트가 렌더링되고 있음을 의미합니다. 이는 서버 측에서 로그가 클라이언트 측 콘솔로 전달되는 경우입니다.
- 빌드 및 Hydration 과정: Next.js는 초기 빌드 후 클라이언트에서 필요한 부분만 Hydrate합니다. 이 과정에서 서버 컴포넌트와 클라이언트 컴포넌트의 재조정이 있을 수 있습니다.

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