SSG는 웹 개발 렌더링 방식 중 하나로, 빌드 타임에 모든 페이지 콘텐츠를 미리 생성하여 정적 HTML 파일로 제공하는 기술이다. 이 방식은 페이지 요청마다 서버에서 렌더링하는 SSR과 달리, 배포 전에 모든 페이지를 준비해두어 빠른 로딩 속도와 우수한 SEO 효과를 제공한다. SSG는 특히 콘텐츠가 자주 변경되지 않는 웹사이트에 적합한 기술이다.
❓ 정의
- SSG는 애플리케이션을 서버에 배포하기 전 빌드 시점에 모든 페이지의 HTML을 미리 생성하는 렌더링 기법이다.
- 빌드 타임에 리액트 코드를 HTML로 변환하여 정적 파일을 생성하므로, 사용자가 요청할 때 미리 준비된 HTML을 즉시 제공할 수 있다.
- 서버는 빌드 과정에서 필요한 데이터를 모두 가져와 페이지를 렌더링하고, 이를 정적 파일로 저장하여 주로 CDN을 통해 배포한다. (권장사항) 하지만 특정 서버에 직접 배포하거나 GitHub Pages 같은 플랫폼을 이용해 배포할 수도 있다.
➕ CDN?
- CDN(Content Delivery Network)은 전 세계 여러 서버에 콘텐츠를 분산 저장하고, 사용자와 가까운 서버에서 데이터를 제공하여 로딩 속도를 개선하는 기술
- 정적 파일을 캐싱하고 빠르게 제공하기 때문에, SSG와 함께 사용하면 로딩 속도와 접근성을 크게 향상시킬 수 있다.
▶ 기본 사용 예시
Next.js에서는 기본적으로 getStaticProps 함수를 이용해 SSG를 구현한다.
export default function HomePage({ books }) {
return (
<div>
<h1>도서 목록</h1>
<ul>
{books.map(book => (
<li key={book.id}>{book.title}</li>
))}
</ul>
</div>
);
}
// 빌드 타임에 실행되는 함수
export async function getStaticProps() {
// 외부 API에서 데이터 가져오기
const res = await fetch('https://api.example.com/books');
const books = await res.json();
// props를 통해 페이지 컴포넌트에 데이터 전달
return {
props: {
books,
},
};
}❗ 사용이유
✅ 뛰어난 성능, 로딩 속도
- SSG는 사용자 요청 시 이미 생성된 HTML 파일을 바로 제공하므로 페이지 로딩 속도가 매우 빠르다.
- 자바스크립트 실행이나 서버와의 통신 없이도 콘텐츠를 즉시 볼 수 있어 초기 렌더링 속도가 우수하다.
- CDN에 정적 파일을 캐싱할 수 있어 전 세계 어디서든 빠른 속도로 웹사이트에 접근할 수 있다
✅ SEO 최적화, 보안성
- 검색 엔진 크롤러가 완전히 렌더링된 HTML을 즉시 수집할 수 있어 SEO에 유리하다.
- 서버 측에서 발생할 수 있는 보안 취약점에 덜 노출되므로 보안 측면에서도 우수하다.
- 자바스크립트가 비활성화된 환경에서도 콘텐츠가 정상적으로 표시되기 때문에 접근성이 높다.
✅ 서버 부하 감소와 운영 비용 절감
- 모든 페이지가 미리 생성되므로 사용자 요청마다 서버에서 렌더링할 필요가 없어 서버 부하가 감소한다.
- 정적 파일만 호스팅하면 되므로 서버 인프라 유지 비용이 적게 든다.
- 확장성이 뛰어나 트래픽이 급증해도 안정적인 서비스 제공이 가능하다.
💥 주의
1️⃣ 빌드 시간과 데이터 업데이트
- 페이지 수가 많아질수록 빌드 시간이 길어져 개발 및 배포 프로세스가 느려질 수 있다.
- 콘텐츠가 변경되면 다시 빌드 후 배포해야 하므로 실시간 데이터가 필요한 경우 적합하지 않다.
- 대규모 웹사이트에서는 빌드 과정이 복잡해질 수 있어 적절한 빌드 전략이 필요하다.
2️⃣ 동적 콘텐츠와 개인화 제한
- 사용자별 개인화된 콘텐츠를 제공하기 어렵다.
- 로그인 상태나 사용자 권한에 따라 달라지는 콘텐츠를 표시하기 위해서는 추가 작업이 필요하다.
- 실시간 데이터(주식 시세, 뉴스 피드 등)를 다루는 애플리케이션에는 적합하지 않다.
💠 예시
1️⃣ 기업 웹사이트 및 마케팅 페이지(랜딩 페이지)
- 회사 소개, 제품 설명, 가격 정보 등 자주 변경되지 않는 콘텐츠를 제공하는 기업 웹사이트에 적합하다.
- 마케팅 랜딩 페이지는 빠른 로딩 속도가 중요하므로 SSG를 활용하면 사용자 경험을 크게 향상시킬 수 있다.
- SEO 최적화가 중요한 기업 웹사이트에서 검색 엔진 노출을 극대화할 수 있다.
2️⃣ 블로그 및 문서화 사이트
- 블로그 포스트는 작성 후 자주 변경되지 않으므로 SSG로 구현하기 적합하다.
- 기술 문서, API 문서, 도움말 페이지 등은 빠른 접근성이 중요하므로 SSG의 장점을 살릴 수 있다.
- Markdown 파일에서 HTML을 생성하는 방식으로 콘텐츠 관리가 용이하다.
3️⃣ 포트폴리오 및 개인 웹사이트
- 디자이너, 개발자의 포트폴리오 사이트는 정적 콘텐츠가 많아 SSG와 잘 맞는다.
- 개인 웹사이트는 자주 업데이트되지 않으므로 빌드 시간 문제가 크지 않다.
- 호스팅 비용을 최소화하면서도 빠른 사이트를 구축할 수 있다.
4️⃣ E-커머스 제품 카탈로그
- 제품 정보가 자주 변경되지 않는 E-커머스 사이트의 제품 카탈로그 페이지에 적합하다.
- 대량의 제품 정보를 빠르게 로딩하여 사용자 경험을 향상시킬 수 있다.
- 제품 검색 결과의 SEO 최적화를 통해 더 많은 잠재 고객을 유치할 수 있다.
❓❗ ISR의 발전
SSG의 한계를 극복하기 위해, Next.js에서는 ISR(Incremental Static Regeneration)이라는 개념이 등장한다. ISR은 Next.js 12버전부터 지원되는 기능으로, 빌드 시점에 페이지를 생성하면서도 설정한 시간마다 페이지를 재생성하여 데이터를 최신 상태로 유지한다. 이는 SSG의 성능적 이점을 유지하면서도 데이터를 주기적으로 업데이트할 수 있게 해준다.
▶ 작동 원리
1. 빌드 타임에 정적 페이지 생성: 초기 빌드 시 모든 정적 페이지가 생성되고 배포된다.
2. 캐싱된 페이지 제공: 사용자는 항상 캐싱된 정적 HTML을 즉시 받아볼 수 있다.
3. revalidate로 설정된 시간이 지나거나 특정 요청이 들어오면, 백그라운드에서 해당 페이지를 다시 생성한다.
4. 새로운 콘텐츠 제공: 재생성이 완료되면 새로운 콘텐츠가 캐시에 저장되고 이후 요청부터 제공된다.
▶ 기본 사용 예시
// ISR 예시
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
// 60초마다 페이지 재생성
revalidate: 60
};
}참고자료
'Cs' 카테고리의 다른 글
| 외워두면 좋은 HTTP 상태 코드 정리 (0) | 2025.04.18 |
|---|---|
| JWT access Token, 어디에 저장하는 것이 좋을까? (0) | 2025.03.28 |
| 5. 알고리즘 (0) | 2024.11.02 |
| 4. 자료구조 (0) | 2024.10.30 |
| 3. 데이터베이스 (0) | 2024.10.29 |