next12 2

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

Next12페이지 단위로 렌더링 방식을 규정.getStaticProps(). SSG,ISR ==> 얼마나 자주 업데이트(할것인지)getServerSideProps()  Next13 페이지 단위가 아니라 컴포넌트 단위로 렌더링 방식을 규정한다.즉,  아래 사진과 같이 한 페이지 안에서 기능별로 클라이언트 컴포넌트와 서버 컴포넌트를 둘다 사용할 수 있다.(기본적으로 모두 서버컴포넌트이다) 서버 컴포넌트(서버에서 빌드가 될때 실행되는 컴포넌트)브라우저에서 제공하는 api 는 사용할 수 없고 node api를 사용해야 한다.useState같은 상태 관련 로직을 사용할 수 없다.   사용자의 상호작용이 필요한 부분만 컴포넌트로 만들고 그걸 모아서 하나의 서버 컴포넌트로 만드는 것이 중요한다.    서버 사이드 렌..

Next12 [Data Fetching] (getStaticProps, getStaticPaths, getServerSideProps)

보통 리액트에서는 데이터를 가져올 때 useEffect안에서 가져온다.하지만 Nextjs에서는 다양한 방식이 있다.(useEffect도 가지고 올수 있다.) getStaticProps(ISR)Static Generation으로 빌드(build)할 때 데이터를 불러온다(미리 한번에 만들어줌) getStaticPaths(SSG)Static Generation으로 데이터에 기반하여pre-render시 특정한 동적 라우팅 구현(pages/post/[id].js)  getServerSideProps(SSR)Server Side Rendering으로 요청이 있을 때 데이터를 불러 온다.(계속)  getStaticProps- getStaticProps 함수를 async로 export 하면, 리턴되는 props를 가지..