서버 컴포넌트의 렌더링 과정
Next.js의 App Router 강의를 듣다가 헷갈리는 부분이 있어서 질문 드립니다!
서버 컴포넌트로 초기 접속을 하게 되면 서버에서 RSC Payload와 HTML을 렌더링해서 브라우저에 보여주는걸까요? 아니면 RSC Payload가 직렬화한 HTML 정보를 가지고 있어서 바로 브라우저에 보내지는걸까요? 공식 문서에는 하이드레이션을 한다고 되어 있는데 하이드레이션을 하게 되면 두 번 렌더링이 되는거 아닌가요??
Link를 통해 서버 컴포넌트로 이동하게 되면 클라이어트 컴포넌트가 이동하는 것처럼 CSR 방식으로 동작을 하는건가요? 만약 동작을 한다 그러면, prefetch된 RSC Payload를 통해서 브라우저가 새로운 UI를 구성하는건가요?
답변 2
0
안녕하세요 이정환입니다. 순서대로 답변드릴게요
1) 사전 렌더링 된 HTML과 서버 컴포넌트만의 실행 결과물인 RSC Payload를 브라우저에 함께 보내주게 됩니다. 이 결과 브라우저는 서버로부터 받은 HTML을 화면에 렌더링 합니다.
여기서 하이드레이션은 서버 컴포넌트에는 해당되지 않는 이야기 입니다. 강의의 서버 컴포넌트 이해하기 챕터에서 말씀드리고 있듯이 하이드레이션이란 브라우저가 Next.js 서버로부터 클라이언트 컴포넌트들의 코드가 묶여있는 JS Bundle을 전달 받았을 때 이를 실행하여 HTML과 JS를 연결하는 과정입니다. 쉽게 말하자면 클라이언트 컴포넌트들의 코드를 브라우저에서 동작시키는 과정이라는 것이죠
그렇다면 클라이언트 컴포넌트는 두번 실행되는것 아닌가? 궁금하실 수 있는데 맞습니다. 이 내용 역시 우리 강의의 서버 컴포넌트 주의사항 챕터에서 자세히 소개 해 드리고 있으니 해당 챕터를 참고하시면 도움이 될 것 같습니다.
2) 네 맞습니다.
0
안녕하세요, 인프런 AI 인턴입니다. gayeongx0916님께서 Next.js의 서버 컴포넌트 렌더링 과정과 관련하여 혼란스러운 부분에 대해 질문하신 것을 확인했습니다. 해당 주제와 관련하여 도움을 드리겠습니다.
서버 컴포넌트의 렌더링 과정
서버 컴포넌트 초기 접속 시:
- Next.js에서 서버 컴포넌트의 초기 접속 시 서버에서 HTML을 사전 렌더링하여 클라이언트에 전달합니다. 이 과정에서 RSC Payload는 서버-클라이언트 간의 상태를 동기화하고, 컴포넌트 트리를 유지하기 위해 사용됩니다.
- 하이드레이션은 사전 렌더링된 HTML을 클라이언트 측에서 실행 가능한 React 컴포넌트로 변환하는 과정입니다. 이는 렌더링을 두 번 하는 것은 아니며, 사전 렌더링된 콘텐츠를 갖고 인터랙티브한 기능을 추가하는 것으로 이해하면 좋습니다.
- Next.js에서 서버 컴포넌트의 초기 접속 시 서버에서 HTML을 사전 렌더링하여 클라이언트에 전달합니다. 이 과정에서 RSC Payload는 서버-클라이언트 간의 상태를 동기화하고, 컴포넌트 트리를 유지하기 위해 사용됩니다.
링크를 통한 서버 컴포넌트 이동:
- Next.js의 Link 컴포넌트를 통해 페이지를 이동하게 되면 기본적으로 CSR(Client-Side Rendering) 방식에 의해 동작하게 됩니다.
- prefetch 기능을 통해 사전에 로딩된 RSC Payload가 사용되어, 클라이언트는 필요한 데이터를 미리 로드하여 빠르게 UI를 구성합니다. 이는 전체 페이지가 새로고침되는 것을 방지하고, 더 나은 사용자 경험을 제공합니다.
- Next.js의 Link 컴포넌트를 통해 페이지를 이동하게 되면 기본적으로 CSR(Client-Side Rendering) 방식에 의해 동작하게 됩니다.
유사 질문과 답변 링크
- RSC 데이터 패칭 질문이있습니다 - Next.js의 데이터 패칭과 RSC Payload 개념에 대해 더 깊이 이해할 수 있는 유사한 질문과 답변을 확인할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
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
102
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