CSR(Client-Side Rendering)은 어떻게 SEO를 극복하는가? (feat. SSR)

리액트(React)와 같은 클라이언트 사이드 렌더링(CSR) 라이브러리들은 현대 웹 개발에서 매우 인기가 높습니다.
이들은 동적이고 사용자 경험이 우수한 웹 애플리케이션을 구축하는 데 큰 장점을 제공합니다.
하지만 CSR에는 SEO(검색 엔진 최적화) 측면에서 몇 가지 도전 과제가 있습니다.

이 블로그 글에서는 CSR과 서버 사이드 렌더링(SSR)의 차이점을 비교하고,
CSR이 SEO에 미치는 영향을 살펴본 후, 이러한 한계를 극복하기 위한 방안을 제시하겠습니다.

---

CSR(Client-Side Rendering)

웹 앱이 서버로부터 최소한의 HTML과 자바스크립트 파일을 전송받고,
클라이언트(브라우저)에서 자바스크립트를 실행하여 페이지의 콘텐츠를 동적으로 생성하는(그리는) 방식

 

CSR의 절차

1. 사용자가 웹 페이지를 요청한다.
2. 서버가 요청을 수신한다.
3. 서버는 사용자에게 최소한의 HTML(CSS, JS 파일에 대한 링크)을 보낸다.
4. 사용자(브라우저)는 최소한의 HTML 구문을 분석하여 DOM 트리를 작성한다.
5. 브라우저가 CSS, JS를 다운로드한다.
6. 브라우저는 DOM 트리, 다운로드된 CSS를 통해 웹페이지의 기본 구조를 그린다.
7. 브라우저는 다운로드된 자바스크립트를 실행하여 웹페이지에 동적 콘텐츠를 추가한다.
8. 사용자와 브라우저의 상호작용에 따라 웹페이지 일부를 다시 그린다.
9. 브라우저에 의해 다시 그려진 웹페이지는 완전히 상호작용적이고 동적인 페이지가 된다.

 

CSR의 장점

• 빠른 페이지 전환: 초기 로드 후 페이지 간 전환이 매우 빠름.
• 사용자 경험(UX) 향상: 페이지 리로딩 없이 동적인 사용자 인터페이스 제공.
• 서버 부하 감소: 서버에서 HTML을 동적으로 생성할 필요가 없어 서버의 부하가 줄어듦.

 

CSR의 단점

• SEO 문제: 검색 엔진 크롤러가 자바스크립트를 실행하지 못하면 콘텐츠를 제대로 인덱싱 하지 못함.
• 초기 로딩 시간: 처음 페이지를 로드할 때 모든 자바스크립트 파일을 다운로드하고 실행해야 하므로 초기 로딩 시간이 길어질 수 있음.
• 브라우저 호환성 문제: 자바스크립트가 비활성화된 환경에서는 제대로 작동하지 않을 수 있음.

---

SSR(Server-Side Rendering)

웹 서버에서 HTML을 생성하고, 완성된 HTML 페이지를 클라이언트로 전송하는 방식

 

SSR의 절차

1. 사용자가 웹사이트에 접속한다.
2. 서버는 요청을 수신하고 원하는 URL을 확인한다.
3. 서버는 HTML 마크업(컨텐츠, 스타일, 기능 포함)을 생성한다.
4. 완전히 그려진 페이지를 사용자의 브라우저로 전송한다.
5. 브라우저는 페이지가 자바스크립트에 의존하지 않으므로 바로 표시한다.
6. 정적인 HTML 페이지에 서버에서 제공한 JS를 불러들여 동적인 페이지로 전환한다.(Rehydration)
7. 사용자가 다른 페이지로 이동하면 새로운 요청을 보내고 일련의 과정을 반복한다.

 

SSR의 장점

• SEO 친화적: 검색 엔진 크롤러가 완전히 렌더링된 HTML을 크롤링할 수 있어 SEO에 유리.
• 빠른 초기 로딩: 초기 로딩 시 서버에서 완성된 HTML을 제공하므로 콘텐츠가 즉시 표시됨.
• 적은 자바스크립트 의존성: 자바스크립트가 비활성화된 환경에서도 페이지가 제대로 표시.

 

SSR의 단점

• 서버 부하 증가: 각 요청마다 서버가 HTML을 동적으로 생성해야 하므로 서버에 부하가 걸림.
• 느린 페이지 전환: 페이지 간 전환 시마다 서버에서 새 HTML을 받아와야 하므로 느려질 수 있음.
• 복잡한 구현: 클라이언트 측 코드와 서버 측 코드를 모두 관리해야 하므로 구현이 복잡해질 수 있음.

---

CSR과 SSR 비교

	CSR	SSR
렌더링 위치	클라이언트(브라우저)	서버
초기 로딩 속도	느림 (자바스크립트 다운로드 및 실행 필요)	빠름 (완성된 HTML 전송)
페이지 전환 속도	빠름 (동적 페이지 전환)	느림 (새 HTML 페이지 요청 필요)
SEO	불리함 (검색 엔진이 자바스크립트를 실행해야 함)	유리함 (검색 엔진이 완전한 HTML을 크롤링)
서버 부하	낮음 (서버에서 HTML 생성 작업 없음)	높음 (서버에서 각 요청에 대해 HTML 생성)
UX	향상 (동적 인터페이스, 페이지 리로딩 없음)	페이지 리로딩 발생 (UX 저하 가능)
브라우저 호환성	자바스크립트 필요 (비활성화된 경우 문제 발생 가능)	자바스크립트 없이도 작동 가능
구현 난이도	상대적으로 쉬움 (주로 클라이언트 코드 작성)	상대적으로 복잡함 (클라이언트와 서버 코드 모두 관리 필요)

Rendering options and their tradeoffs (출처 web.dev)

---

CSR의 SEO 한계와 극복 방안

CSR의 SEO 한계

1. 초기 페이지 로드 지연:
   CSR에서는 서버에서 최소한의 HTML과 자바스크립트만 제공하고,
   클라이언트에서 자바스크립트가 실행되어 콘텐츠를 렌더링 합니다.
   이로 인해 실제 콘텐츠가 브라우저에 표시되기까지 시간이 걸리며,
   검색 엔진 크롤러가 이 콘텐츠를 제대로 인덱싱하지 못할 수 있습니다.
2. 검색 엔진 크롤러의 제한:
   일부 검색 엔진 크롤러는 자바스크립트를 실행하지 않거나 제한된 자바스크립트만 처리할 수 있습니다.
   이러한 크롤러는 CSR 페이지의 모든 콘텐츠를 제대로 읽지 못해 SEO 성과에 부정적인 영향을 미칠 수 있습니다.
3. 메타 태그 및 OG 태그:
   SEO에 중요한 메타 태그나 OG(Open Graph) 태그가 클라이언트 사이드에서 렌더링 되기 때문에,
   초기 HTML에 포함되지 않으면 검색 엔진이 이를 제대로 인식하지 못할 수 있습니다.

 

CSR의 SEO 한계 극복 방법

• 서버 사이드 렌더링(SSR) 도입:
  서버에서 HTML을 미리 렌더링하여 클라이언트에 전달하는 방법입니다.
  이는 검색 엔진 크롤러가 완전한 HTML을 인덱싱할 수 있게 해주며, 초기 페이지 로딩 속도도 개선됩니다.
  리액트의 경우 Next.js와 같은 프레임워크를 사용하여 SSR을 구현할 수 있습니다.
• 정적 사이트 생성(SSG):
  정적 사이트 생성은 빌드 타임에 모든 페이지를 미리 렌더링하여 정적 파일로 생성하는 방식입니다.
  이는 빠른 초기 로딩 속도와 SEO 친화성을 제공합니다.
  리액트에서는 Gatsby나 Next.js를 활용하여 SSG를 구현할 수 있습니다.
• 하이브리드 접근법:
  SSR과 CSR을 결합하여, 초기 페이지 로딩 시 서버에서 렌더링된 HTML을 제공하고
  이후의 인터랙션은 클라이언트 사이드에서 처리하는 방식입니다.
  이는 SEO와 사용자 경험을 모두 고려한 접근법입니다.
• 프리렌더링(Prerendering):
  자바스크립트가 실행되지 않더라도 콘텐츠가 미리 렌더링된 HTML을 제공하는 방식입니다.
  Prerender.io와 같은 도구를 사용해 자바스크립트를 실행하여
  미리 렌더링된 HTML을 서버에 저장하고 요청 시 제공하는 방법입니다.
• 구글 검색 콘솔 활용:
  구글 검색 콘솔을 사용하여 페이지가 어떻게 인덱싱 되고 있는지 모니터링하고, 문제를 발견하여 수정할 수 있습니다.
  구글은 자바스크립트 페이지도 크롤링할 수 있지만, 다른 검색 엔진의 크롤링 능력과 다를 수 있음을 고려해야 합니다.
• 시맨틱 태그 사용:
  시맨틱 태그를 사용하여 HTML 구조를 명확하게 정의함으로써
  검색 엔진 크롤러가 페이지의 콘텐츠와 구조를 더 잘 이해할 수 있도록 돕는 방법입니다.
  시맨틱 태그는 검색 엔진에게 각 콘텐츠의 의미를 명확하게 전달하여,
  페이지 인덱싱 효율성을 높이고 SEO 성능을 향상시킬 수 있습니다.
  이 방법은 CSR 환경에서도 검색 엔진이 페이지를 더 효과적으로 분석하도록 하는 데 기여합니다.

---

결론

리액트와 같은 CSR 기반 라이브러리는 사용자 경험을 크게 향상할 수 있지만, SEO에는 도전 과제가 있을 수 있습니다.
이러한 한계를 극복하기 위해 SSR, SSG, 하이브리드 접근법, 프리렌더링, 시맨틱 태그와 같은 다양한 방법을 고려할 수 있습니다.
각 접근 방법의 장단점을 잘 이해하고, 프로젝트의 요구사항에 맞는 최적의 방법을 선택하여 효과적인 SEO를 달성하는 것이 중요합니다.

---

웹에서 렌더링  |  Articles  |  web.dev

SPA SEO, 두 마리 토끼를 잡는 법

How You Render Can Affect Your SEO (CSR vs SSR vs Dynamic)

What is Client-side Rendering (CSR)?

What is Server-side Rendering (SSR)?

한컴테크