[11장][효리] Next.js 13과 리액트 18

[hyoribogo]

퀴즈

서버 사이드 렌더링과 서버 컴포넌트의 차이를 간단하게 설명해주세요.
사실 아는대로 자세하게 작성하면 더 좋음

답

정답

SSR: 서버에서 초기 html을 렌더링하고 이를 클라이언트로 전송. 클라이언트는 이를 하이드레이션하고 이벤트 핸들러를 붙임
RSC: 서버에서 리액트 컴포넌트를 만들어서 JSON으로 내려줌. 클라이언트에서는 JSX를 파싱할 필요 없이 해당 데이터를 받아서 사용함.

자세한 설명은 아래 블로그 참고!
https://velog.io/@duarufp06/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8B%A4%EB%A5%BC%EA%B9%8C

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[khj0426]

정답

SSR은 완성된 정적 HTML을 내려주고 클라이언트가 하이드레이션을 하기 전까지 유저와 상호작용 불가! 서버 컴포넌트는 HTML이 아닌 JSON을 내려준다.

[hayamaster]

정답

서버 사이드 렌더링 : 서버에서 HTML을 생성하고, 이를 클라이언트에 전송한 후, 클라이언트 측에서 JS 파일을 다운 받아 이벤트 리스너와 같은 기능을 추가합니다.
서버 컴포넌트 : 서버에서 리액트 컴포넌트가 렌더링되어 JSON 형태로 클라이언트에 전송됩니다. 따라서 클라이언트에서 필요한 JS를 최소화 시키고, 성능을 최적화 시킵니다.