[SEO] 렌더링 방식과 SEO, Hydration의 관계

🌐 CSR, SSR, SSG, ISR의 렌더링 방식과 SEO, Hydration의 관계

SEO 최적화를 고민하다가 CSR/SSR뿐만 아니라 SSG, ISR 그리고 SEO, Hydration에 대한 개념을 정리하고 실제 사용 시 어떤 조합이 적절한지 고민해보게 되었다.

 

---

✅ Hydration이란?

Hydration은 서버에서 생성된 정적 HTML을 클라이언트에서 React가 연결하여 실제로 동작하게 만드는 과정이다.

 

• SSR, SSG, ISR 모두 hydration이 필요하다
• HTML만으로는 상호작용이 불가능하며, React의 이벤트 바인딩이 완료되어야 비로소 인터랙션이 가능해진다
• Hydration 동안에는 버튼 클릭, 입력 등이 잠시 비활성화될 수 있어 사용자 경험에 영향을 줄 수 있다

 

예를들어,

• 서버가 만들어준 HTML: <button>좋아요</button>
• 이 HTML은 보이지만, 클릭해도 아무 반응 없음
• JS가 로드되고 나면 React가 이 버튼을 인식하고, onClick 핸들러 연결함

 

Hydration의 UX 고려사항

• Hydration이 완료되어야 → 앱이 진짜로 작동한다
  (Hydration 중에는 사용자 인터랙션이 비활성화되어 UX 이슈가 생길 수 있음)
• Hydration 시간이 길어질 경우 사용자에게 비활성 상태로 보이는 구간이 발생할 수 있다
• 이를 개선하기 위해 streaming, partial hydration 등의 방식이 연구되고 있다

 

---

✅ 렌더링 방식의 종류

 

1. CSR (Client-Side Rendering)

클라이언트(브라우저)에서 렌더링을 담당하는 방식

 

💡 동작 방식

1. 브라우저가 최초로 빈 HTML을 요청함
2. HTML 안에는 <div id="root"></div> 와 JS 번들 스크립트만 있음
3. JS 파일 다운로드 후 실행 → React 앱이 브라우저에서 렌더링됨

 

💡 SEO 관점

• 검색 엔진이 콘텐츠를 제대로 읽지 못할 수 있음
  → JS 실행 이후에 콘텐츠가 그려지기 때문에, JS를 렌더링하지 않는 봇은 콘텐츠를 인식하지 못함
• 일부 검색 엔진(Google)은 CSR을 처리할 수 있으나 여전히 한계 존재

 

💡 Hydration 관점

• CSR은 Hydration이 아님
  → 처음부터 JS로 화면을 "그리는" 방식이기 때문

 

💡 특징

• 빠른 초기 로딩 (서버 부담 적음)
• 첫 화면까지의 시간은 느림 (TTV: Time to View)
• JS 장애 발생 시 아무것도 보이지 않음

 

---

2. SSR (Server-Side Rendering)

서버에서 HTML을 완성해 보내주는 방식 (ex. Next.js의 getServerSideProps)

 

💡 동작 방식

1. 브라우저가 요청을 보내면,
2. 서버가 해당 페이지를 구성하는 데 필요한 데이터 패칭 → React 렌더링 실행
3. 최종 HTML을 브라우저에 전달
4. 브라우저가 받은 HTML을 사용자에게 즉시 보여줌
5. 이후 React가 클라이언트에서 연결됨 (Hydration)

 

💡 SEO 관점

• 초기 HTML에 콘텐츠가 포함되어 있어 SEO에 매우 유리
• 검색 엔진은 HTML만 읽어도 핵심 내용을 파악 가능

 

💡 Hydration 관점

• 서버에서 전달받은 HTML을 React가 다시 “살리는” 과정이 필요
• 이 과정을 Hydration이라고 부름
• Hydration 중에는 클릭, 입력 같은 이벤트가 비활성화되어 있음

 

💡특징

• 첫 화면 빠르게 렌더링 가능
• 페이지 이동마다 서버 호출 필요 → 성능 저하 가능
• 서버 비용 증가 가능성

 

---

3. SSG (Static Site Generation)

빌드 타임에 HTML 파일을 미리 생성해두는 방식 (Next.js의 getStaticProps)

 

💡동작 방식

1. 프로젝트를 배포할 때, 각 페이지를 미리 렌더링해서 정적인 HTML로 저장
2. 사용자가 접속하면 HTML만 빠르게 응답됨
3. 이후 React가 Hydration을 수행

 

💡SEO 관점

• 정적인 HTML이기 때문에 SEO에 최적화
• CDN 캐시를 통한 빠른 응답 가능

 

💡Hydration 관점

• 브라우저가 HTML을 받은 후, React가 해당 콘텐츠를 활성화(hydrate) 함
• 실제로는 눈에 보이는 건 HTML이지만, React가 뒤늦게 붙는 느낌

 

💡 특징

• 빌드 타임이 길어질 수 있음 (페이지 수 많을 경우)
• 실시간 데이터 반영 불가

 

---

4. ISR (Incremental Static Regeneration)

SSG의 단점을 보완한 방식: "정적 + 동적"의 절충안

 

💡동작 방식

1. 기본적으로 SSG처럼 정적 HTML을 서빙
2. 설정된 revalidate 시간이 지나면,
   • 백그라운드에서 새 페이지를 생성
   • 요청한 사용자에게는 기존 페이지 제공
   • 다음 사용자는 새 페이지를 받게 됨

 

💡SEO 관점

• 정적 페이지로 시작하므로 SEO에 유리
• 주기적으로 최신 데이터 반영 가능

 

💡Hydration 관점

• 초기 Hydration은 일반적인 SSG와 동일하게 동작
• 변경된 HTML이 있다면 다음 Hydration에 반영됨

 

💡특징

• 빌드 타임 걱정 없이 많은 페이지 제공 가능
• 실시간성이 필요한 페이지에도 활용 가능

 

---

✅ 정리

방식	SEO 적합성	Hydration 필요	사용 예시
CSR	낮음	없음	관리자 대시보드, 내부 페이지
SSR	높음	필요	마케팅 페이지, 실시간 정보 페이지
SSG	높음	필요	블로그 글, 회사 소개 페이지
ISR	높음	필요	상품 상세 페이지, 뉴스 페이지