SSR이 검색엔진에 더 잘 보이는 이유

SSR이 SEO에 더 최적화돼 있다고 하는데, 어떤 부분에서 왜 그런지에 대해 정리해본 글이다.

 

CSR 과 SSR 간단 정리

- CSR (Client Side Rendering) : HTML을 거의 빈 상태로 보내고, 브라우저에서 JS로 전체 페이지 렌더링

- SSR (Server Side Rendering) : 서버에서 HTML을 이미 렌더링된 상태로 만들어서 클라이언트에 전달

 

CSR은 말 그대로 브라우저에서 모든 걸 렌더링하고 그려주는 반면, SSR은 HTML을 서버에서 완성해서 먼저 보내주는 방식이라고 보면 된다.

 

왜 SSR이 검색엔진에서 더 잘보일까

검색엔진(특히 구글, 네이버, Bing )은 페이지에 접속해서 그 안에 들어있는 HTML 구조와 텍스트 콘텐츠를 읽고 분석한다.
이때, SSR 방식은 HTML이 처음부터 이미 완성된 형태로 존재하므로, 검색 엔진 입장에서 바로 HTML을 읽고 이해할 수 있다.

반면, CSR은 초기 HTML이 거의 비어 있어서, 검색 봇이 자바스크립트를 먼저 실행한 후에야 내용을 확인할 수 있게 된다.

• 렌더링까지 시간이 오래 걸릴 수 있고
• JS 오류나 비동기 처리로 인해 콘텐츠를 놓치는 경우도 생길 수 있다.

그런 점에서 SSR은 훨씬 더 빠르고 안정적으로 HTML 콘텐츠를 노출할 수 있기 때문에, 검색 결과에 반영되기 더 유리하다.

 

고렇다면, CSR에서도 SEO를 챙길 수 있는 방법은? 

1. <META>태그 잘 설정하기 - 검색엔진이 페이지를 파악할 때 가장 먼저 참고하는것이 메타태그이다.

2. 이미지 alt 속성, 링크 a 태그 제대로 쓰기

 

• 이미지에는 항상 alt 속성을 넣어줘야 검색엔진이 내용을 파악할 수 있음
• Link 컴포넌트를 쓰더라도 내부적으로는 <a>로 렌더링되게 해야 SEO가 가능

3. 사전렌더링 도입

CSR 프로젝트에서도 특정 페이지에 대해 사전 렌더링을 미리 해주는 도구들이 있다.

• Netlify의 Edge Functions
• Vercel의 Pre-rendering 지원 기능