12CODE
Q

프론트엔드 프레임워크(Next.js / Nuxt.js) 기반 자사몰의 SEO 성능 극대화를 위한 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)의 하이브리드 설계 기준은?

50개 영역 중 9위 · 184건

이런 질문도 같은 답입니다

Next.js 커머스 렌더링 전략SSR SSG ISR 선택 기준자사몰 렌더링 하이브리드 설계

결론부터

핵심은 SSR과 SSG 둘 중 하나를 고르는 게 아니라, 페이지 성격별로 세 갈래(SSG·ISR·SSR)로 나눠 섞어 쓰는 것입니다.

답변

3단계
01

자주 바뀌지 않는 콘텐츠 — 브랜드 소개, 자주 묻는 질문, 정책 페이지, 카테고리 랜딩 — 는 SSG로 빌드 시점에 미리 정적 HTML을 만들어 CDN에서 서비스하세요. 요청마다 서버가 렌더링하는 방식보다 응답 속도가 훨씬 빠르고, 검색엔진이 크롤링하기도 가장 안정적입니다.

02

상품 상세·목록·리뷰처럼 재고·가격은 자주 바뀌지만 페이지 자체가 유저마다 다르지는 않은 콘텐츠는 ISR(증분 정적 재생성)이 적합합니다. 빌드 시점에 정적으로 생성해두고 설정한 재검증 주기(revalidate)마다 백그라운드에서 새로 렌더링해 캐시를 갱신하는 구조라, SSG의 속도와 SSR의 최신성을 동시에 얻을 수 있습니다. 재검증 주기는 재고·가격이 얼마나 자주 바뀌는지에 맞춰 초 단위부터 시간 단위까지 조절하면 됩니다.

03

장바구니·마이페이지·검색결과처럼 로그인 상태나 개인화 데이터에 따라 매번 완전히 다른 내용을 보여줘야 하는 페이지만 SSR로 좁히세요. 요청마다 서버가 렌더링하므로 항상 최신 데이터를 보여줄 수 있지만, 그만큼 응답 시간이 느리고 서버 부하도 크기 때문에 꼭 필요한 페이지에만 한정하는 게 실무에서 통용되는 설계 원칙입니다. 이 3단 구조(SSG-ISR-SSR)로 페이지를 분류하면, 전체 SEO 크롤링 안정성과 서버 비용을 동시에 최적화할 수 있습니다.

같이 보면 좋은 게시글

3편

12CODE ACADEMY

체계적으로 배우고 싶다면

퍼포먼스 광고 운영 과정에서 이 판단 기준을 순서대로 다룹니다.

과정 둘러보기 →

×N의 의미

같은 취지의 질문이 몇 번 반복됐는지입니다. ×10을 넘으면 개인의 실수가 아니라 구조적으로 헷갈리게 설계된 지점이라고 보는 편이 정확합니다.

MKT TOOLS

실무자를 위한 무료 도구

카피 글자수 검사, CPC·ROAS 계산기, UTM 생성기까지.

워크스페이스 열기 →