인프런 커뮤니티 질문&답변
작성한 질문수
클라이언트 컴포넌트 자식으로 서버 컴포넌트를 넣었을 때의 원리에 대해서 질문있습니다!
작성
·
1.5K
1
서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요??
클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요??
클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다.
강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??
답변 2
1
서버에서는 서버컴포넌트 뿐만 아니라 클라이언트 컴포넌트도 렌더링합니다. 다만 클라이언트 컴포넌트의 use 관련된 훅은 돌지 않습니다. 클라이언트에서는 서버에서 렌더링된 결과물을 받은 뒤에, 클라이언트 컴포넌트를 다시 하이드레이션/렌더링합니다.
클라이언트 컴포넌트 이름은 상당히 잘못지어졌는데, 둘다컴포넌트라고 생각하시면 좋습니다.
서버 컴포넌트는 페이지를 불러올 때 서버에서만 먼저 렌더링되고, 클라이언트 컴포넌트는 서버/클라이언트 모두 렌더링됩니다.
공식문서의 어떤 부분이었는지 알려주시면 좋을 것 같습니다.
이 부분이 설명의 거의 전부라고 보시면 됩니다. 번역해서 보시면 됩니다.
https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr
이렇게 next/dynamic 후 ssr: false까지 하시면 됩니다!
저 링크드인 글에도
Client components are not CSR components. They are not components that are only rendered on the client.
Client components can be rendered using the rendering method that Next.js previously provided as Pre-rendering.
Client components can also be rendered using SSR, SSG methods. The server can pre-render the components.
나와 있네요 ㅎㅎ
언제나 친절한 답글 감사합니다!
하나만 더 여쭤보고 싶은게 있는데, router.back()으로 뒤로가기를 누른 경우, 원래 리렌더링이 이뤄지지 않는건가요?
이미지를 눌러서 화면을 parallel routing으로 전체를 덮도록 구현하시고 난뒤에, X 버튼을 누를 때, router.back()으로 뒤로가기를 구현하셨는데 기존 페이지가 리렌더링이 되지 않는 이유에 대해 궁금했습니다!
이 이유는 뒤에 cache 섹션에 나오는데 client cache가 있어서 30초 동안은 뒤로가기 누를 때 캐싱된 페이지 그대로 씁니다.
그리고 모달 식으로 되어 있는 애들은 주소만 바뀌면서 모달만 뜨고 꺼질 뿐 배경 컴포넌트가 바뀌는 게 아니라서 그냥 가만히 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다.
강의 내용과 관련하여 클라이언트 컴포넌트와 서버 컴포넌트의 관계 및 렌더링 방식에 대해 궁금하신 점이 있으시군요. 조현영 강사님이 이와 유사한 질문에 답변한 내용이 있어 참고하실 수 있도록 안내해 드리겠습니다.
- 클라이언트 컴포넌트가 서버 컴포넌트를 import하면 서버 컴포넌트가 클라이언트 컴포넌트로 변환되는지에 대한 질문에 대한 답변 내용입니다. 이는 클라이언트 컴포넌트와 서버 컴포넌트의 관계에 대한 이해를 돕는데 도움이 될 것입니다.
또한, 처음 페이지가 로드될 때 Next.js에서 어떻게 서버 사이드 렌더링이 이루어지는지에 대한 설명이 담긴 다른 질문들도 있으니 참고하시면 좋을 것 같습니다.
- 서버 사이드 렌더링(SSR)의 순서와 이해에 관한 질문에 대한 답변입니다.
- 관련 질문&답변 URL: React로 NodeBird SNS 만들기 - SSR 순서 및 이해
- Next.js의 동작 과정, 특히 SSR 이후 페이지에서의 동작이 CSR과 어떻게 다른지에 대한 설명이 담긴 질문에 대한 답변입니다.
- 관련 질문&답변 URL: React로 NodeBird SNS 만들기 - Next.js의 동작 과정 설명
위의 링크들을 참고하시어 궁금하신 점을 해결하시길 바랍니다.
답글 감사합니다!
https://www.linkedin.com/pulse/server-component-client-geojung-im-d6fec/
공식 문서가 아니라 이 글을 봤었던 것 같네요 ㅜㅜ
그럼 클라이언트 컴포넌트는 prerendering을 허용하는 것이고, 서버 컴포넌트는 서버에서만 렌더링되는 컴포넌트인건가요??
그리고 장점이 많이 퇴색되겠지만 클라이언트 컴포넌트는 이전의 리액트 컴포넌트처럼 클라이언트에서만 렌더링이 되도록 할 수도 있을까요??