요약

  • NextJs는 자바스크립트 실행 전에 HTML을 생성하기 때문에 데이터 종속성 관리를 신경써야한다.

내용

  • NextJs는 모든 페이지를 미리 렌더링 한다.
  • 이는 자바스크립트 실행 전에 HTML 생성한다는 것을 의미한다.
  • 이를 Pre-Rendering이라고 한다.
    • Pre-Rendering을 사용하지 않는 경우 바로 Hydration과정을 거친다.
    • Pre-Rendering을 사용하는 경우 HTML을 표시하고 JS를 추가한다.
  • Pre-Rendering은 정적 생성(Static Generation), 서버 사이드 렌더링(Server-side Rendering) 두 가지 형태가 있다.
  • 데이터 종속성이 존재하는 경우(페이지 렌더링에서 필요한 데이터가 있는 경우) getStaticProps() 또는 getServerSideProps()를 사용해야 한다.
    • getStaticProps()는 최초 생성 이후로 데이터 업데이트가 필요 없는 페이지에서 사용한다. (빌드 시에 딱 한번만 호출된다.)
    • getServerSideProps()는 데이터 업데이트가 이루어지는 페이지에서 사용한다. (페이지가 요청받을 때 마다 호출된다.)

참고