Next.js - SEO와 Pre-rendering

패캠 강의 : Next.js 완전 정복 확장성 높은 커머스 서비스 구축하기

Next.js는 기본적으로 Pre-rendering한다.

1. 처음 크롤러가 인식할 HTML이 로드된다.(CSR은 빈페이지부터 시작하므로 크롤러가 아무 데이터도 조회할 수 없는 페이지가 된다.)

2. 이후 js번들이 로드되면서 사용자와 웹이 인터렉션할 수 있음.(HTML만으로는 인터렉션 할 수 없음)

 

Next.js의 Pre-rendering 방식

• SSG : 빌드타임에 딱 한번 pre-render(권장됨)
  • ISR을 통해 데이터 변화가 업데이트 되도록 하는것이 좋음
• SSR : 요청타임마다 pre-render
  • Page의 내용물이 외부데이터에 의존적인 상황 : getStaticProps로도 가능
  • Page Paths까지 외부데이터에 의존적인 상황 : getStaticPaths도 함께 활용