모카스터디/ETC 개발 지식

Next12 vs Next13 렌더링 차이점[서버 컴포넌트, 클라이언트 컴포넌트]

softmoca__ 2024. 1. 24. 23:02
목차

Next12

페이지 단위로 렌더링 방식을 규정.

getStaticProps(). SSG,ISR ==> 얼마나 자주 업데이트(할것인지)

getServerSideProps()

 

 Next13 

페이지 단위가 아니라 컴포넌트 단위로 렌더링 방식을 규정한다.

즉,  아래 사진과 같이 한 페이지 안에서 기능별로 클라이언트 컴포넌트와 서버 컴포넌트를 둘다 사용할 수 있다.

(기본적으로 모두 서버컴포넌트이다)

 

서버 컴포넌트(서버에서 빌드가 될때 실행되는 컴포넌트)

브라우저에서 제공하는 api 는 사용할 수 없고 node api를 사용해야 한다.

useState같은 상태 관련 로직을 사용할 수 없다.

 

 

 

사용자의 상호작용이 필요한 부분만 컴포넌트로 만들고 그걸 모아서 하나의 서버 컴포넌트로 만드는 것이 중요한다.

 

 

 

 

서버 사이드 렌더링처럼 행동

 

 

 

 

즉, 서버컴포넌트는 최대한 많은 정적파일들을 미리 싹 찾아서 html로 만들어서 클라이언트로 보내려고한다.