server component, client component를 알고가자 !

Server component와 Client component가 무엇일까 ... ?

Server side rendering이 핫해지며 서버 컴포넌트와 클라이언트 컴포넌트 개념을 자주 접하게 되었다 !

나는 이런 개념들 정확히 아는걸 좋아하니까 정리해보자 ~~~

일반적으로 리액트에선 모든게 클라이언트 단에서 이루어진다. (CSR)

next는 클라이언트 단에서 모든 것을 부담하지 않아도 되게끔 개선했다!
보안을 강화시켜주고, 번들링 될 자바스크립트 양도 줄여주고, data fetching과 렌더링을 동일한 환경에서 수행할 수 있는 점 등등 장점이 꽤나 많은 것 같다ㅏ
그런데 또 단점은 이렇게 서버 단에서 생성된 html에 결국 클라이언트 단에서 hydrate 작업을 진행해줘야 한다는 것이다. 즉 추가적인 자바스크립트 코드가 필요하다는 소리 ...!

서버사이드 렌더링은 정적으로도, 동적으로도 구현할 수 있다고 한다.

SSG: 빌드된 시점에 데이터 fetch
SSR: 매 요청시마다 데이터 refetch (할때마다 서버사이드에서 페이지 생성)

정적(static): 서버 단에서 서버 컴포넌트와 클라이언트 컴포넌트 모두 빌드 시에 미리 렌더링될 수 있다. 일단 요청에 따른 응답 결과를 캐싱해두고, 뒤이은 요청에는 그 캐싱해둔 결과를 재사용하는 방식이다. SSG, ISR 방식이 이에 해당한다.
동적(dynamic): 서버 컴포넌트와 클라이언트 컴포넌트가 매 요청 시 렌더링되며, 응답 결과는 캐싱되지 않는다. SSR 방식이 이에 해당한다.

• data fetching이 필요한 경우 👉 서버 컴포넌트
• 백엔드 자원에 접근해야 하는 경우 👉 서버 컴포넌트
• 클라이언트에 드러내면 안 되는 민감한 정보가 있을 때 👉 서버 컴포넌트
• 자바스크립트 코드를 줄여야 할 때 👉 서버 컴포넌트
• click, change 리스너 등을 사용하여 대화형(상호작용) 컨텐츠를 구현하려는 경우 👉 클라이언트 컴포넌트
• '상태(state)'을 활용하는 경우 👉 클라이언트 컴포넌트
• 브라우저 상에서만 지원하는 API(예: local storage와 같은 웹 스토리지를 다루는 API)를 사용하는 경우 👉 클라이언트 컴포넌트

Next.js에 따르면 가능한 경우에는 서버 컴포넌트로 만들고 따로 클라이언트 컴포넌트로 구현이 필요한 부분들만 추출하는 편이 좋다고 한다.

1. server component 란 ?