[Next] 정적생성(SSG) & SSR

JH Cho·2022년 12월 31일
0

NextJS

목록 보기
1/5

NextJS의 장점

  • 모든 페이지를 사전 렌더링(pre-rendering)을 통하여
    더 좋은 퍼포먼스와 SEO(검색엔진최적화)를 제공한다.

CSR의 경우 빈 HTML에 JS까지 결합한 후에서야 페이지에 컨텐츠가 표시됨.
SSR의 경우 서버에서 이미 생성된 HTML을 구성하여 클라이언트에 보내주고
클라이언트에서는 해당 HTML을 화면에 표시한 채로 JS를 다운받아 적용하게 된다. (관련 정리글 바로가기)

SSG와 SSR의 차이

  • 언제 HTML파일을 생성하는가 기준

정적생성

  • 프로젝트가 빌드하는 시점에 html 파일이 생성
  • 모든 요청에 재사용
  • 퍼포먼스를 이유로, 넥스트는 정적 생성을 권장
  • 정적 생성된 페이지들은 CDN에 캐시
  • getStaticProps / getStaticPaths

SSR

  • 매 요청마다 html을 생성
  • 항상 최신 상태 유지
  • getServerSideProps
  • CDN에 캐싱하지 않아 조금 느릴 수 있다.
profile
주먹구구식은 버리고 Why & How를 고민하며 프로그래밍 하는 개발자가 되자!

0개의 댓글