오늘은 개인 프로젝트를 진행하는 도중, Next.js가 강조하는 렌더링 방식에 따라 SSG를 사용하는 페이지를 구분하다보니 더욱 깊게 파보고 싶어 간단한 조사를 해보았습니다. 그 내용을 적어보겠습니다.
1. SSG(Static Site Generation)란?
SSG는 빌드 시 모든 페이지를 HTML로 생성하는 정적인 렌더링 방식입니다.
2. SSG의 작동 방식
빌드 단계:
npm run build 명령어 실행 시, getStaticProps/getStaticPaths를 통해 데이터를 가져와 모든 페이지를 HTML로 미리 생성합니다.
서빙 단계:
생성된 HTML, CSS, JS 파일을 CDN에 배포하여 사용자 요청 시 즉시 제공합니다.
3. SSG의 장점
⚡️ 성능
정적 파일을 CDN에서 제공하므로 첫 로딩 속도가 매우 빠릅니다.
🔍 SEO 최적화
크롤러가 완성된 HTML을 즉시 읽을 수 있어 검색 노출에 유리합니다.
🛡 보안 & 확장성
서버 사이드 로직이 없어 보안성이 높고, 트래픽 급증 시에도 CDN으로 대응 가능합니다.
4. SSG의 단점
🔄 실시간 데이터 부적합
빌드 후 콘텐츠 변경 시 전체 사이트 재빌드가 필요합니다.
👤 사용자별 콘텐츠 한계
모든 사용자에게 동일한 페이지가 제공되며, 개인화된 데이터는 클라이언트 측에서 추가로 가져와야 합니다.
📦 대규모 사이트 빌드 시간
페이지 수가 많아질 경우 빌드 시간이 길어질 수 있습니다.
5. SSG가 적합한 사례
-
블로그, 포트폴리오, 문서 사이트
-
제품 소개 페이지
-
콘텐츠 업데이트 주기가 긴 경우
📖 마치며
SSG는 정적 콘텐츠에 이상적인 렌더링 방식입니다. Next.js에서는 SSG말고도 렌더링 방식 3가지나 더 강조하고 있기 때문에 이 방식도 추가로 더욱 깊게 파볼 예정입니다.
그나저나 Next.js 쓰니까 렌더링 구분하기 너무 쉽네요😂.
