개인적인 정리

Next.js 는?

-> FE 프론트엔드 프레임워크

Next.js 데이터패칭 (3+1)가지 방법

SSR : 서버가 그린다.

getServerSideProps

CSR : 클라이언트가 그린다

기존 React 사용법과 동일함.

SSG : 정적인 사이트를 생성한다.

빌드하고 스타트해야함.
yarn dev 할 경우 SSR과 동일하게 동작.
그리는 주체 : 빌더
데이터를 가져와서 그려둔다.
빌드를 할때 만들어진다. (실행 타임은 빌드타임)
getStaticProps
getStaticPaths

ISR : (Incremental Static Regeneation)

빌드하고 스타트해야함.
증분 증적 사이트 (SSR + SSG)
yarn dev 할 경우 SSR과 동일하게 동작.
(특정 주기로) 데이터를 다시 그린다.
getStaticProps (with revalidate)

SSR은 서버 부하를 유도함. 따라서, SSG 혹은 ISR 을 사용하는 것을 권장.

---

Layout / Pages / Image

Pre-render : next.js 모든 페이지를 프리렌더한다.

(미리 그린다.)
html 미리 그리고 -> js loads 한다. (Hydration)

• seo -> pre-render가 필요함.
• csr 만 제공하면, client 처럼 동작하지 않는 검색엔진의 경우 아무런 데이터 조회가 불가능함.
• pre-render를 하면, client 처럼 동작하지 않는 검색엔진에게도 데이터를 제공할 수 있다.

next.js pre-render 방식

• ssg (적극적으로 사용, 빌드 타임에 pre-render)
• ssr (요청 타임에 pre-render)

ssg 2가지 상황

• 페이지의 내용물이 외부 데이터에 의존적인 상황
  getStaticProps
• 페이지의 paths까지 외부데이터에 의존적인 상황 (:id등이 필요한 경우)
  getStaticPaths

Layouts

• 여러 Page들의 공통 처리
  예시

• 하나의 공통된 Layout을 쓰는 경우
  components/Layout.js
  참고로, 페이지 폴더가 아닌 컴포넌트 폴더 하위의 리액트 컴포넌트들은 서버사이드렌더링이 불가능함.

• pages/_app.js : 모든 페이지의 공통 레이아웃

// 만약 특정 url에서 골라서 Layout 만 적용하는 법
.getLayout = function getLayout(page) {
	return ()
}