Next.js 13 version의 렌더링 방식
v12에서 '페이지' 단위로 렌더링 방식을 규정했다면 v13부터는 server component, client component의 개념을 도입하여 '컴포넌트' 단위로 렌더링 방식을 규정함
🗄 Server component
- server component는 서버에서 실행된다.
- 작성한 코드는 서버에서 실행되고 pre-rendering 된 HTML 페이지로 브라우저에게 보내기 때문에 브라우저에서는 server component에서 작성한 코드가 실행되지 않는다.
- 서버에서 동작하기 때문에 브라우저에서 제공하는 api나 state는 사용 불가하며 node api와 같이 서버에서 제공하는 api는 사용 가능하다.
🖥 Client component
- 파일 상단에 'use client'로 client component임을 명시해주어야 한다.
- client component라 하더라도 무조건 CSR되는 것은 아니다!
→ 정적인 데이터가 없는지 확인하여 있다면 정적인 HTML파일로 pre-rendering한다.
→ 그 다음 javascript 등 코드들을 받아 hydration이 끝나면 리액트 컴포넌트로 변환한다.
