왜 SSR은 SEO에 친화적인가 (Why SSR for SPA Sites SEO Friendly)

몇년 전부터 React, Angular, Vue와 같은 SPA 방식의 Front-end 개발 방식이 크게 유행하고 있습니다. 이는 매우 빠른 랜더링을 제공하므로 페이지 전환 시 페이지가 하얗게 되는 현상을 방지할 수 있으며 웹앱으로 개발 시에도 Native 앱과 크게 차이가 없는 서비스를 제공할 수 있다는 장점이 있습니다.

그러나, 이러한 방식에도 단점이 있으니 바로 SEO 에 맞지 않는 다는 점 입니다. 최근 구글에서는 검색 봇이 이를 감지하여 별다른 조치 없이도 SPA에서 SEO가 가능하도록 지원하고 있으나 다른 검색 사이트에서는 아직 이러한 기능을 적용하지 않고 있습니다.

이 페이지에서는 이를 해결하기 위한 몇가지 방법을 알아보겠습니다.

SPA에서 SSR을 하는 이유

Angular 공식 사이트에서는 이를 3가지로 분류하고 있습니다.

1. SEO 때문입니다. 검색 엔진 최적화를 적용해야 검색 사이트에서 노출 빈도가 높아지기 때문입니다.
2. 모바일 및 저전력 기기에서의 성능 개선 때문입니다.
3. FCP(first-contentful paint) 첫번째 페이지를 빠르게 보여주기 위한 기법 때문입니다.

참고: Angular

SPA에서 SEO 해결 방안

1. 해쉬 기반으로 url을 작성하거나 검색엔진에서 검색하는 문구로 대체합니다. 예) http://url.com/#!/page 또는 구글의 경우 #!를 “_escaped_fragment_=”로 인식하므로 http://url.com/_escaped_fragment_=/page 로 만들 수 있습니다.
   
   

이 문제의 단점은 검색 사이트마다 방식이 다를 수 있기 때문에 모든 케이스를 다 고려할 수 없다는 점 입니다.

1. Metero를 사용하며, Request의 user-agent를 보고 처리하는 방법입니다. 이 방법은 제대로 테스트 해보지 못하였기 때문에 잘 정리된 사이트의 링크를 첨부하오니 참고하시기 바랍니다.

참고: WebFrameworks.kr - SEO 제대로 처리하기

1. SPA에서 SSR 기능 활용 서버에서 static 하게 어플리케이션을 생성하여 이를 클라이언트에 부트스트랩 합니다. 이 방식의 장점은 요청을 서버에서 처리하므로 SEO에 맞출 수 있으면서도 동시에 static 값을 client에 전달하므로 페이지를 기존 SSR 방식보다 매우 빠르게 랜더링 할 수 있다는 점 입니다.
   
   

참고 사이트

• 이제 Angular에서는 이러한 문제를 어떻게 해결하는지 알아보겠습니다.