next js 2 (pre-rendering의 2가지 방법)

next.js의 장점

next.js는 모든 페이지를 사전에 렌더링한다. 그러니까 미리 html 파일들을 만들어 놓는것임. 그래서 더 좋은 성능을 내며 seo(검색 엔진 최적화)에도 좋다.

'사전에 렌더링' 하는 두 가지 방법

1. 정적 생성
2. server side rendering(SSR, Dynamic Rendering)
   이 두 가지 방법은 언제 html 파일을 생성하느냐에 차이가 있다.

1. 정적 생성

• 프로젝트가 빌드되는 시점에 html 파일들이 생성된다.
• 모든 요청에 그 파일들을 재사용한다. 한 번에 파일들을 다 만들어 놓고 호출이 오면 그 파일을 재사용하는 것.
• 퍼포먼스의 이유로 next.js는 정적 생성을 권장한다고 한다.
• 정적 생성된 페이지들은 CDN에 캐쉬 된다.
• getStaticProps 나 getStaticPaths를 사용한다.

2. server side rendering(SSR, Dynamic Rendering)

• 매 요청마다 html을 생성.
• 항상 최신 상태가 유지된다.
• getServerSideProps
• 예) 쇼핑몰 상세 페이지 같은 것..

유저가 요청하기 전에 미리 만들어놔도 상관 없으면 정적 생성 방법을 쓰면 된다. (예: 블로그 게시물, 제품 리스트, 가이드 문서 등..)