SSG SSR 방식 차이점

SSG

빌드 타임에 pre-render를한다

페이지의 내용물이 외부 데이터에 의존적인 상황

• 이 상황에는 getStaticProps를 활용한다.

페이지의 Paths 까지 외부 데이터에 위존적인 상황

• 이 상황은 getStaticPaths도 함께 활용해야 한다.

SSR

요청 타임에 pre-render를 한다

Layout

여러 Page들의 공통 처리

하나의 공통된 Layout을 쓰는 경우

components/Layout.js

컴포넌트 하나를 pages/_app.js에서 활용하면 된다.

페이지가 아니라 컴포넌트에는 SSR을 할 수 없다.

NextJS 가 제공하는 최적화 Image Component

• Improved Performance

• Visual Stability(CLS-Cumulative Layout Shift 방지)

• Faster Page Loads(viewport 진입시 로드 / blur 처리)

• Asset Flexibility(리사이징)