V12 vs V13
v12에서는 페이지 단위로 렌더링 방식을 규정
→ getStaticProps(), getServerSideProps() 함수를 통해 SSG(+ ISR), SSR 여부를 결정
v13에서는 서버 컴포넌트, 클라이언트 컴포넌트 개념이 도입
서버 컴포넌트는 서버상에서만 동작하는 컴포넌트
컴포넌트 단위로 렌더링 방식을 규정
한 페이지 내에서 서버,클라이언트 컴포넌트를 적절히 섞어서 개발
서버 컴포넌트와 클라이언트 컴포넌트에서는 각각 할 수 있는 것이 다름!
서버 컴포넌트
app폴더에 있는 모든 컴포넌트들은 기본적으로 서버 컴포넌트이다.
→ 별도로 설정하지 않는 이상 서버에서 실행되는 코드.
서버 컴포넌트 코드는 서버에서 실행되고 프리렌더링 된 HTML 페이지로 만들어서 전송됨.
따라서 console.log 같은 코드들은 브라우저에서 실행되지 않는다!
❌ 서버에서 동작하기 때문에 브라우저에서 제공하는 API는 사용할 수 없음
✅ 대신 Node API는 사용 가능 (os 같은 API 사용 가능)
→ 파일 시스템에 접근이 가능하다! (Database 통신도 가능)
서버에서 동작하고 있기 때문에 상태관련 코드(useState, useEffect …), localStorage 같은 것들은 사용 불가
클라이언트 컴포넌트
‘use client’를 최상위에 선언해서 사용
모든 컴포넌트를 클라이언트 컴포넌트를 쓰는 것보다 부분적으로 사용하는 것이 중요
components 폴더에 부분적으로 useState를 사용할 컴포넌트를 만들고 상위에 ‘use client’; 선언
build를 하게 되면 클라이언트 컴포넌트 페이지도 우선 정적인 HTML로 만들어져 브라우저에 전송되지만,
useState를 통해 만든 이벤트들, 버튼들은 동작하지 않는다.
→ 동작하기 위해서는 hydration이 일어나야함.
Why Server Component?
서버 컴포넌트는 서버상에서 온전히 남아있으므로 자바스크립트 번들을 클라이언트에게 보내줄 필요가 없다.
→ 자바스크립트 번들 사이즈가 작아진다.
초기 페이지 로딩 속도가 빨라짐, 자바스크립트 번들 사이즈가 작아진다 → 캐시, 예측 가능하기 좋아짐.
클라이언트 컴포넌트는 무조건 클라이언트에서 돌아가는 것이 아니라 서버상에서 pre-rendering이 되어 HTML로 만들어진다. 그리고 이 코드가 동작하기 위한 코드만 번들링 되어서 클라이언트에 보내짐.
↔ 기존과 다른점, 기존엔 해당 페이지가 pre-rendering이 되어 제공되고 페이지에 필요한 모든 코드를 클라이언트에 보내서 hydration이 발동.
하지만 클라이언트 컴포넌트는 해당 코드가 동작하기 위한 코드만 번들링되어 클라이언트에 보내지므로 번들 사이즈가 줄어드는 것이다.
