Next.js 9.3, SSG, Sass 지원으로 프론트엔드 개발 생산성 UP!
by DD
6년 전
조회수 4
Next.js 9.3 출시, getStaticProps, getServerSideProps를 활용한 차세대 SSG 지원
Sass 지원 추가, CSS Module을 통해 컴포넌트 단위 스타일 관리 가능
404 페이지 자동 정적 최적화 및 32kB 런타임 사이즈 감소로 성능 향상
getStaticProps, getServerSideProps: 데이터 페칭 방식
getStaticProps는 빌드 타임에 데이터를 가져와 정적 페이지를 생성한다. 구체적으로 CMS 연동 시 유용하며, CDN 캐싱을 통해 빠른 로딩 속도를 보장한다. getServerSideProps는 각 요청마다 데이터를 가져와 서버 사이드 렌더링을 수행한다. 따라서 SSR이 필요한 경우에 적합하며, 데이터 보안을 강화한다.
Sass 지원: CSS Module과의 조화
Next.js 9.3은 Sass를 기본적으로 지원하여, 기존 CSS 기반 프로젝트의 전환을 용이하게 한다. CSS Module을 통해 컴포넌트 단위의 스타일 관리가 가능하며, 스타일 충돌을 방지한다. 반면, 기존 next-sass 플러그인 사용 시 충돌이 발생할 수 있으므로, 설정 변경이 필요하다.
404 페이지 최적화: 성능 향상
Next.js 9.3은 404 페이지를 자동으로 정적 페이지로 생성하여 성능을 개선한다. 구체적으로, 서버 부하 감소 및 빠른 응답 속도를 제공한다. 따라서, 사용자 경험을 향상시키고, SEO에도 긍정적인 영향을 미친다. pages/404.js를 통해 커스터마이징 가능하다.
