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

jojeon4515님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

서버 컴포넌트 렌더링 질문

24.08.19 01:19 작성

·

43

0

안녕하세요 선생님. "Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)" 강의 내용중에 궁금한점이 있어 질문드립니다.

강의에서 5:42 ~ 6:35 시간 구간에서의 내용에 관해서 이해가 잘 안되는 부분이 있는데요. 홈 화면에 처음 들어올 때에는 로딩스피너가 안보이고 탐색하기 등 다른 페이지에서 홈 화면으로 들어오면 로딩스피너가 보이는 이유를 설명해주시는 부분입니다.

홈 화면에 처음 들어왔을 때에는 홈 화면에 해당하는 page.tsx를 서버에서 다 그려주기 때문에 로딩 상태가 없어서 로딩스피너가 안보이고, explore에 있다가 클라이언트에서 홈으로 넘어갈 때에는 explore에서 홈 페이지를 새로 로딩을 하기 때문에 로딩 스피너가 뜨는거라고 설명해주셨는데요. "explore에서 홈 페이지를 새로 로딩을 한다" 라는게 무슨 말인지 잘 모르겠습니다 ㅠ page.tsx가 CSR이 된다는 것인가요?

저는 어떤 페이지에 들어오면 그 페이지에 해당하는 page.tsx가 실행되는걸로 알고 있었는데 아닌가요? 홈의 page.tsx는 서버 컴포넌트인데 왜 홈에 처음 들어왔을 때만 page.tsx가 서버에서 실행되고 그 이후에는 마치 클라이언트에서 데이터 패칭하고 그에 따라 렌더링이 되는것처럼 "로딩"이라는 상태가 존재하는것인지가 궁금합니다.

 

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 08. 19. 01:59

next.js는 첫 페이지 로딩만 SSR이고 그 다음 페이지부터는 CSR처럼 동작합니다. 물론 그 때도 서버 컴포넌트는 서버에서 실행되긴하지만 결과물은 JSON같은 형식으로 클라이언트에 전송되어 CSR됩니다.

jojeon4515님의 프로필 이미지
jojeon4515
질문자

2024. 08. 19. 10:30

아하.. 그럼 서버 컴포넌트가 실행된 결과물이 JSON같은 형식으로 클라이언트에 전송되어 "CSR 된다"는게 그 json같은 결과물을 클라이언트 측에서 해석하고 실제 DOM트리로 그리는 건가요? 그리고 그 과정에서 로딩 상태가 발생하는 것이구요