클라이언트 컴포넌트 자식으로 서버 컴포넌트를 넣었을 때의 원리에 대해서 질문있습니다!
1913
작성한 질문수 61
서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요??
클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요??
클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다.
강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??
답변 2
1
서버에서는 서버컴포넌트 뿐만 아니라 클라이언트 컴포넌트도 렌더링합니다. 다만 클라이언트 컴포넌트의 use 관련된 훅은 돌지 않습니다. 클라이언트에서는 서버에서 렌더링된 결과물을 받은 뒤에, 클라이언트 컴포넌트를 다시 하이드레이션/렌더링합니다.
클라이언트 컴포넌트 이름은 상당히 잘못지어졌는데, 둘다컴포넌트라고 생각하시면 좋습니다.
서버 컴포넌트는 페이지를 불러올 때 서버에서만 먼저 렌더링되고, 클라이언트 컴포넌트는 서버/클라이언트 모두 렌더링됩니다.
공식문서의 어떤 부분이었는지 알려주시면 좋을 것 같습니다.
이 부분이 설명의 거의 전부라고 보시면 됩니다. 번역해서 보시면 됩니다.
0
답글 감사합니다!
https://www.linkedin.com/pulse/server-component-client-geojung-im-d6fec/
공식 문서가 아니라 이 글을 봤었던 것 같네요 ㅜㅜ
그럼 클라이언트 컴포넌트는 prerendering을 허용하는 것이고, 서버 컴포넌트는 서버에서만 렌더링되는 컴포넌트인건가요??
그리고 장점이 많이 퇴색되겠지만 클라이언트 컴포넌트는 이전의 리액트 컴포넌트처럼 클라이언트에서만 렌더링이 되도록 할 수도 있을까요??
1
https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr
이렇게 next/dynamic 후 ssr: false까지 하시면 됩니다!
1
저 링크드인 글에도
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.
나와 있네요 ㅎㅎ
0
언제나 친절한 답글 감사합니다!
하나만 더 여쭤보고 싶은게 있는데, router.back()으로 뒤로가기를 누른 경우, 원래 리렌더링이 이뤄지지 않는건가요?
이미지를 눌러서 화면을 parallel routing으로 전체를 덮도록 구현하시고 난뒤에, X 버튼을 누를 때, router.back()으로 뒤로가기를 구현하셨는데 기존 페이지가 리렌더링이 되지 않는 이유에 대해 궁금했습니다!
1
이 이유는 뒤에 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의 동작 과정 설명
위의 링크들을 참고하시어 궁금하신 점을 해결하시길 바랍니다.
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
132
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2