Next.js 는 처음엔 SSR, 이후엔 CSR 방식
React js의 경우 처리를 마치기 전에는 html에서는 로딩중-유저가 보게 될 화면, react가 처리를 마치고 나면 useEffect, useState, fetch를 마치고 나서의 정보를 state에 넣어서 유저가 데이터가 있는 화면을 보게 되는 것 ⇒ 바로 모든 것이 보여지면 좋겠다, 혹은 SEO를 활용하고 싶다면? getStaticProps 등을 이용한 서버사이드렌더링을 하는 것
Next js의 특징은 페이지를 미리 html로 렌더링해준다. 컴포넌트 초기 상태를 미리 export하는데 두가지 프리렌더링 방식이 있다.
- Server-side rendering: SSR
- Static site rendering: SSG
-
요청에 따라 페이지가 데이터를 계속 업데이트 해야 한다면?
런타임 때 페이지 컴포넌트를 라우팅 요청에 따라 서버에서 실행하는 getServerSideProps 를 사용 -
데이터의 변화가 없다면?
빌드타임 때 미리 렌더링되어 SEO에 좋은 getStaticProps 를 사용
static site rendering은 빌드할 때 데이터를 가져와서 html 생성 후 사용자 요청이 있을 때마다 html을 재사용한다. 따라서 동적 라우팅을 사용하려면 getStaticPaths를 사용해야 한다.
getStaticProps는 데이터를 fetch할 수 있고 원하는 모든 것을 할 수 있는데 이것은 프론트에서는 보여지지 않고 서버에서 실행되는 함수.
무엇을 리턴하던지 이 오브젝트 안에 props라는 키가 들어있고 키 안에는 원하는 데이터를 넣어줄 수 있다. 결국 이 props를 페이지에게 주는 것
서버사이드를 통해 props를 page로 넘긴다. ⇒ pageProps(_app.js)
