검색엔진이 웹페이지를 처리할때
검색엔진(특히 구글봇)은 단순히 HTML 텍스트만 긁어가는 것이 아니라, 실제 브라우저처럼 페이지를 “렌더링”하여 콘텐츠를 파악한다. 이 과정은 크게 두 단계로 나뉜다.
이 두 단계에를 거치면서 발생하는 문제는 CSR(Client Side Rendering) 구조로,
- CSR은 최초 HTML에 <div id=”root”></div> 같은 빈 껍데기만 제공한다.
- 구글봇이 JS 실행까지 기다려야 하므로, 크롤링/인덱싱 속도가 늦어질 수 있다.
- 반대로 SSR(서버사이드 렌더링)이나 SSG(정적 사이트 생성)은 완성된 HTML을 즉시 제공하므로 검색엔진 친화적이다.
HTML 크롤링
요청 시 서버에서 내려주는 순수 HTML 문서를 파싱한다.
이때 <title>, <meta> 태그, <a> 링크, 텍스트 콘텐츠 등 렌더링 이전에도 노출된 요소들이 가장 먼저 수집된다.
따라서 이 시점에 의미 있는 콘텐츠가 HTML에 포함되어 있으면, 검색엔진이 곧바로 인덱싱할 수 있다.
렌더링 큐 처리
필요할 경우 렌더링 큐에 페이지를 넣어 두고, 나중에 JavaScript 실행 환경에서 페이지를 완전히 렌더링한다.
JS가 실행되어야만 생성되는 콘텐츠는 이 단계에서야 인덱싱이 가능하다.
문제는 이 과정이 시간이 오래 걸리고, 리소스가 제한적이어서 모든 페이지를 즉시 처리하지 못한다는 점이다.
그래서 CSR 구조의 웹사이트는 크롤링/인덱싱 속도가 현저히 늦어지거나, 심하면 누락되는 경우도 발생한다.
결국, 검색엔진이 HTML 단계에서 바로 읽을 수 있는 정보를 얼마나 제공하느냐가 SEO의 핵심.
CSR과 SSR의 SEO
CSR**(Client-Side Rendering)**
- 동작 방식: 서버에서 최소한의 HTML만 내려주고, 실제 콘텐츠는 브라우저가 JS 실행 후 생성한다.
- 장점
- 클라이언트 상태에 따라 화면을 유연하게 바꿀 수 있어, 사용자 경험이 풍부하다.
- 초기 로딩 이후에는 페이지 전환이 빠르다.
- 단점
- 검색엔진이 최초 HTML을 읽을 때는 비어 있는 상태이므로 SEO에 불리하다.
- 구글봇이 JS 실행까지 기다려야 하므로 인덱싱 속도가 느리다.
- 일부 검색엔진이나 SNS 봇(카카오톡, 트위터 카드 등)은 JS 실행을 아예 하지 못해 미리보기조차 나오지 않는 경우가 있다.
SSR(Server-Side Rendering)
- 동작 방식: 서버에서 요청이 들어올 때마다 HTML을 완전히 렌더링해서 내려준다.
- 장점
- 최초 응답에 완성된 HTML이 포함 → 검색엔진이 즉시 인덱싱 가능.
- 초기 페이지 로딩 속도가 빠르다(LCP 개선).
- OG(Open Graph), Twitter Card 같은 소셜 메타태그도 문제없이 동작.
- 단점
- 모든 요청마다 서버 연산이 필요해, 트래픽이 많으면 부하가 크다.
- CDN 캐싱 효과를 잘 활용하지 못하면 확장성에서 불리하다.
SSG(Static Site Generation)
- 동작 방식: 빌드 시점에 HTML을 생성해두고, 요청 시 그대로 제공한다.
- 장점
- 이미 완성된 HTML을 제공하므로 SEO에 최적.
- CDN 캐싱과 함께 쓰면 서버 부하가 거의 없다.
- 단점
- 데이터가 자주 바뀌는 페이지에는 적합하지 않다.
- 콘텐츠 업데이트 후 빌드 및 배포 과정이 필요하다.
*ISR(Incremental Static Regeneration)
- Next.js가 제공하는 SSG의 단점을 보완한 방식.
- 특정 페이지를 미리 빌드하되, revalidate 주기마다 백그라운드에서 새 HTML을 생성한다.
- SEO에는 SSG처럼 완성된 HTML을 제공하면서도, 데이터가 일정 주기로 업데이트된다.
검색엔진 최적화 관점에서
실무적으로는 Next.js가 이를 위해 페이지별로 렌더링 전략을 다르게 혼합 적용할 수 있게 설계되어 있다.
즉, SEO가 중요한 페이지는 SSR/SSG, 로그인 뒤 내부 페이지의 일부는 CSR로 처리하는 식이다.
즉, SEO를 고려한다면 “페이지의 특성”에 맞는 전략적 선택이 필요.
- 실시간 업데이트 필요한 영역 → SSR + 클라이언트 하이드레이션
- 상품 상세 → SSG / ISR
- 랜딩 페이지 → SSR / SSG
