참고자료
Next.js 공식문서 : https://nextjs.org/docs/app/building-your-application/rendering/client-components
velog
https://velog.io/@tnrud4685/Next.js-13%EB%B2%84%EC%A0%84
https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#rscreact-server-component-vs-rccreact-client-component
Server Component
- 말 그대로 서버에서 동작하는 컴포넌트
- 컴포넌트가 렌더링 되는 위치가 서버에서 동작함
Benefit of Server Redering
- Data fetching : 데이터 fetching을 서버에서 진행 => 렌더링에 필요한 데이터를 가져오는데 걸리는 시간과 요청 횟수를 출여 성능 향상
- Security : 토큰 및 API키와 같은 민감한 데이터와 로직을 클라이언트에 노출할 위험 없이 서버에 보관 가능
- Caching : 캐시를 통해 후속요청 및 사용자 전체에 대해 재사용 가능
- Performance : 클라이엉트 측 자바스크립트의 양을 줄일 수 있음 => 브라우저에서 다운로드, 구문분석 및 실행할 양이 줄어듬 => 인터넷 속도가 느리거나 성능이 낮은 환경에서도 유용함
- Initial Page Load and First Contentful Paint(FCP) : 렌더링에 필요한 JS를 다운로드, 구문분석 및 실행할때까지 기다릴 필요 없이 사용자가 즉시 페이지를 볼 수 있도록 HTML 생성 가능
** FCP : https://web.dev/articles/fcp?hl=ko - SEO and Social Network Shareability : 검색엔진 봇이 색인 생성하는데 사용, 소셜 네트워크봇이 소셜 카드 미리보기를 생성하는데 사용 가능
- Streaming : 렌더링 작업을 chunks로 분할하여 준비되는대로 클라이언트로 스트리밍 가능 => 서버에서 전체 페이지가 렌더링될 때까지 기다릴 필요 없이 페이지의 일부를 먼저 볼 수 있음
Client Component
- 버튼 또는 검색창과 같이 사용자와 상호작용하는 작은 UI들을 클라이언트 단에서 렌더링 되는 컴포넌트
- 기본적으로 next.js는 Server Component가 기본이기 때문에 파일의 최상단에 'use client'를 작성해 주면 된다.
Benefit of Client Rendering
- Interactivity : 상태, 효과 및 이벤트 리스터를 사용할 수 있음, 사용자에게 즉각적인 피드백을 제공하고 UI를 업데이트 할 수 있음
- Browser API : 브라우저 API에 접근이 가능(위치정보, 로컬스토리지 등)
언제 사용해야 할까?
나는 어떻게 쓰고 있나?(돌아보기)
- 할 수 있는 영역이 잘 구분 되어 있기 때문에 필요한 곳에 적재적소에 배치할 수 있어야 한다.
- 지금은 구분은 interactive가 필요하거나 훅을 사용할때는 React Component를 그외에는 Server Component를 사용하고 있다
- 하지만 정신없이 코딩을 하다보면 모든 파일을 'use client'로 사용하고 있는 잘못을 저지르고 있다. 이렇게 되면 Next.js를 쓰는 의미가 없어진다.
- 항상 내가 정한 기준을 가지고 영역을 잘 나누어 코딩할 수 있어야 할 것 같고 아직 명확하게 나누지 못하는 부분들은 컴포넌트로 분리를 해보는 식으로 적용해 봐야겠다
