server component 와 client component 차이 질문있습니다

[정은숙]

현재 server component ( page.tsx ) 에서 하위로 client component 를 가지고 있습니다

여기서 질문은 해당 페이지에서 개발자 도구로 확인 했을 때 불러와지는 doc 에 

server component 의 내용만 채워져있는게 아니라
client component 의 내용도 함께 채워져 있었습니다

정확히는 client component 에서 fetch 로 불러온 data 는 불러오지 못했지만 하드코딩으로 집어넣은 문자열과
태그들은 살아있었다는 말이죠

그럼 react 의 cra 에서 사용한 spa 의 csr 과 좀 햇갈리는 부분이 생기는데
React 에서 배운 바로는 비어있는 HTML 과 번들된 JS 를 클라이언트에서 렌더링하여 보여준다는 뜻인데

NEXTjs 는 다르게 client component 에서도 비어있는 HTML 에 JS 를 나중에 읽어들이는게 아니고 data fetching 부분만 나중에 실행되는 건가요?

[codingapple]

client component도 미리 채워보낼 수 있는 html은 미리 채워보냅니다 useEffect안의 코드는 페이지 로드시 실행됩니다

[글쓴이]

글