서버컴포넌트를 children으로 사용해도, 브라우저에서 출력이 되는 것 같습니다.
3.5) 리액트 서버 컴포넌트 주의사항
강의의 12분 쯤
- 서버 컴포넌트를 클라이언트 컴포넌트의 children props로 사용하면, 브라우저에서 서버컴포넌트가 렌더링 되지 않는 걸 보여주는 예시에서요.
(with-searchbar)/page.tsx1
(with-searchbar)/client-component.tsx
(with-searchbar)/server-component.tsx
현재 잘 따라한거 같은데, 서버 컴포넌트가 브라우저에 출력이 되더라구요.
서버 컴포넌트로서 출력이 된거 같긴한데.
브라우저에서 서버 컴포넌트가 보이면 안되는 거 아닌가 싶은데, 현재 next 15.3 이라서 그런건가 싶기도 하구요!
답변 2
0
안녕하세요 이정환입니다.
먼저 출력된 콘솔 메세지의 좌측을 보시면 "server" 라고 되어 있는걸 보실 수 있는데요, 이는 Next.js 앱과 브라우저에서 개발 도중에 로그를 더 쉽게 살펴볼 수 있도록 서버측 콘솔을 브라우저에도 띄워주는 기능입니다. 실제로 배포를 목적으로 프로덕션으로 앱을 가동하시면 해당 메세지는 브라우저에서는 확인할 수 없게 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. 최지호님.
Next.js에서 클라이언트 컴포넌트와 서버 컴포넌트 간의 상호작용과 렌더링에 대해 살펴보겠습니다.
서버 컴포넌트와 클라이언트 컴포넌트
서버 컴포넌트는 서버에서 렌더링되어 HTML로 전달되며, 클라이언트에서의 작업이 불필요합니다. 서버 컴포넌트는 클라이언트에서 직접적으로는 사용되지 않기 때문에 주로 데이터를 불러와 그 결과를 클라이언트 컴포넌트로 전달합니다.
클라이언트 컴포넌트는 클라이언트 사이드에서 작업이 필요한 경우 주로 사용됩니다. 서적, 상태 관리, 이벤트 핸들링 등을 담당합니다.
왜 브라우저에 서버 컴포넌트가 출력되는지?
Next.js의 버전 13 이상에서는 서버와 클라이언트 컴포넌트를 혼합하여 사용할 수 있습니다. 현재 문제는 클라이언트 컴포넌트 내에서 서버 컴포넌트를 Children으로 사용했을 때 발생하는 것으로 보입니다. 이는 서버 컴포넌트가 클라이언트에서 직접 JavaScript로 로딩되거나 로깅되는 상황일 수 있습니다.
다음의 점들로 접근해볼 수 있습니다:
- 서버 컴포넌트의 로깅: 로그 메시지가 클라이언트 콘솔에 나타난다면, 이는 서버에서 해당 컴포넌트가 렌더링되고 있음을 의미합니다. 이는 서버 측에서 로그가 클라이언트 측 콘솔로 전달되는 경우입니다.
- 빌드 및 Hydration 과정: Next.js는 초기 빌드 후 클라이언트에서 필요한 부분만 Hydrate합니다. 이 과정에서 서버 컴포넌트와 클라이언트 컴포넌트의 재조정이 있을 수 있습니다.
관련 자료 보기
유사한 문제나 상호작용에 대한 이야기를 이미 많이 다뤘습니다. 더 자세한 내용을 확인하는 것이 도움이 될 수 있습니다:
- 클라이언트 컴포넌트가 서버에서 어떻게 렌더링되는지 궁금합니다!: 클라이언트 컴포넌트와 서버 컴포넌트의 렌더링 과정을 설명하는 추가 정보가 포함되어 있습니다.
위 내용을 참고하여, 브라우저에서 서버 컴포넌트가 어떻게 렌더링 되는지를 보다 구체적으로 이해할 수 있을 것입니다. Next.js의 버전에 따라 동작 방식이 약간씩 다를 수 있으며, 공식 문서를 통해 더욱 최근의 변경 사항을 확인하는 것이 좋습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Next.js 사전렌더링 이해하기 부분
0
22
2
모달 관련 질문
0
30
3
렌더링 관련 질문
0
76
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
59
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
60
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
73
2
npx prisma db push 시 에러가 뜹니다.
0
91
3
vercel 배포를 실패하였습니다.
0
94
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
54
2
getServerSideProps 함수와 SSR의 관계
0
76
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
58
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
112
2
일반적인 nextjs project architecture에 대하여..
0
83
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
71
2
배포 시 오류 발생
0
83
2
백엔드 서버 오류납니다.
0
79
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
103
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
74
2
익스텐션 질문
0
58
1
강의 들으면서 궁금한 부분 질문드립니다.
0
108
1
서버 배포 에러입니다.
1
97
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2