NextJs

Next.js란?

리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 프레임워크.

Next.js의 대표적 특징이자 장점

• 기본적으로 서버사이드 렌더링을 제공함
• 서버사이드 렌더링의 장점
• 검색엔진 최적화
• 초기 로딩 성능 개선
• 그냥 검색엔진 최적화 SEO (Search Engine Optimization)
• 더욱 빠른 페이지 로드를 위한 코드 스플리팅 자동화
• HMR을 지원하는 웹팩 기반 환경
• Express나 Node.js와 같은 http 서버와 함께 구현 가능
• Babel, Webpack 설정 커스터마이징 가능

DataFetch

• isomorphic-unfetch

getInitialProps → 9.3버전부터 변경된 함수들

공통점 : page 컴포넌트에서 사용해야 함.

• getStaticProps

  • SSG
  • 다른 함수들 보다 이 함수를 사용하길 권장
  • 데이터를 캐싱하고 pre-rendering을 진행, 그러기에 좀 더 좋은 성능
  • request에 앞서 페이지를 렌더링할 때 필요한 데이터가 있을 때
  • 데이터가 공식적일 때 (특정 유저랑 관계되면 안됌)
  • 데이터가 headless CMS로 부터 올 때,

  ** headless CMS?

  • 머리는 컨텐츠를 보여줄 수단, 몸통은 컨텐츠를 의미
  • 머리(표현 수단)를 언제든 바꿔 끼울 수 있다는 뜻이다.
  • Headless CMS는 어떻게 작동하는가?
    1. 컨텐츠 편집자와 개발자가 완벽히 분리될 수 있다. 컨텐츠 편집자는 익숙한 GUI로 컨텐츠를 추가/수정/삭제 할 수 있다.

• getStaticPaths

  • getStaticProps를 쓸 때만 사용 가능
  • route가 동적일 때 사용한다. /post/[pId]
  • 단, 그럼 post id가 20000개 가량 있을때도 이걸 pre render할 것이냐..? → 예방방법이 있다함.

• getServerSideProps

  • SSR
  • 요청마다 반환 데이터값이 변화가 많을 경우 이 함수로 호출하면 좋다.
  • 빌드 이후에도 Data 변경가능? 그럼 SSR사용

SSG vs SSR

pre-rendering : 미리 html을 만드는 것.

** 여기서 빌드타임이란? next-build

Static Generation

HTML을 빌드타임에 만들어가지고, 각각 request 보낼 때 재 사용함. getStaticProps를 export해서 사용한다.

bundle.js에도 포함 안됌.(?)

Server-Side Rendering

HTML이 각각 request를 보낼 때 만들어짐. getServerSideProps를 export하여 사용한다.