August 9, 2022

Pre-renders와 SEO

• Next.js는 모든 페이지를 기본적으로 pre-render 한다

Pre-renders와 SEO의 상관관계

• CSR만 제공한다면, Client처럼 동작하지 않는 검색엔진의 경우 아무런 데이터 조회가 불가능하다
• Pre-render를 해둠녀 Client 처럼 동작하지 않는 검색엔진에게 필요한 데이터를 제공할 수 있다.

Next.js의 Pre-rendering 방식

• SSG를 SSR보다 추천함
• SSG는 빌드 타임에 pre-render,
  • 미리 정보를 생성해두어서 검색엔진이 바로 접근이 가능
• SSR은 요청 타임에 pre-render
  • 검색 엔진이 접근 할 때마다 노드 서버가 정보를 생성해서 줌

SSG 2가지 상황

• Page의 내용물이 외부 데이터에 의존적인 상황
  • getStaticProps만 가지고도 가능
• Page Paths 까지 외부 데이터에 의존적인 상황
  • getStaticPaths도 함께 활용해야 가능

Layout.js

• 하나의 공통된 layout을 쓰는 경우 컴포넌트 하나를 pages/_app.js에서 활용하면 됨
• _app.js 는 페이지의 모든 부분을 포함하는 구조
• 만약 여러개의 Layouts를 활용하고 싶은 경우 → components/SubLayout.js → getLayout 함수를 제공