[React] SEO 문제의 배경과 극복하는 방법

08.05.2023

0. Background

이 글은 한 유튜브 동영상에서 영감을 받아 작성된 글입니다. 프론트엔드 개발자 지망 학생으로서 좋은 인사이트를 얻을 수 있는 동영상인데 조금 길어서 나누어 읽거나 다른 것을 하면서 편안하게 듣는 것을 추천드립니다.

https://youtu.be/w6TiQJ9SlY4

---

1. SEO에 대한 개요

1-1. SEO 이전의 웹개발 역사

모두 아시다시피 웹개발의 초창기에는 프론트고 백엔드고 구분없이 웹개발을 했었습니다. 그 당시에는 웹이 그렇게 복잡하지 않았으니까요.

그러나 웹과 인터넷이 진화하면서 점점 사람들이 기대하는 기능과 기술들이 많아지고, 코드량도 계속 쌓이게 됩니다.

자세하게 말하자면 확장성, 자원최적화 등등이 있겠지만, 결국 한마디로 웹서비스 규모가 커진 것이 프론트와 백엔드가 나누어진 계기입니다.

 

프론트와 백엔드가 나누어졌을 초기 당시에는 당연히 state들을 백엔드에서 관리했죠. 현재 많이 사용되는 SPA-CSR 페이지가 아닌 MPA-SSR로 개발이 진행되었습니다.

그러다 보니 서버의 부하가 높아졌습니다. 요구되는 페이지들은 많은데 서버자원은 한정되어있고, 관리가 필요한 state들이 많아지고, 로직도 복잡해 지면서 서서히 프론트쪽으로 넘어오게 되었습니다.

중간중간 등장한 반응형페이지, 협업의 중요성 등의 요소들도 프론트엔드의 부흥을 부추겼습니다.

그렇게 자연스럽게 SPA와 CSR를 도입해 서버에는 루트페이지 하나만 저장을 하게 되었습니다.

state들을 효율적으로 관리하기 위해 ContextAPI, Redux, Recoil 등과 같은 라이브러리들도 많이 등장하였습니다.

여기까지가 SEO가 중요해지기 전까지의 흐름입니다.

1-2. SEO란

SEO는 Search Engine Optimization을 뜻합니다.

풀어서 말하자면, 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정을 말합니다.

이게 왜 기존 프론트엔드 생태계에서 문제가 되었을까요? SEO는 웹 크롤링 기술을 활용하기 때문입니다.

SPA의 특성상 서버에 저장되는 유일한 페이지인 Root페이지는 검색엔진에서 경쟁력이 있는 데이터정보들을 가지고 있지 않습니다.

중요한 정보들은 모두 렌더링 된 후에 나타나니까요. 웹크롤러가 크롤링을 아무리 해도 서버는 줄 수 있는 정보가 없습니다.

그러다 생각해낸 방법이 결국 old way로 돌아가는 것입니다. SSR는 이런 관점에서 좋은 솔루션이니까요. 다만 당연하게도 규모가 좀 있다 싶은 웹개발에 프레임워크/라이브러리는 필수이겠죠?

이렇게 시작된 게 Next.js입니다.

2. 그냥 Next.js를 쓰면 되는건가?

Next.js가 핫한 기술스택으로 떠올라 사람들이 맛 보기 시작할 때 쯤, 많은 사람들은 React.js의 몰락 가능성을 바쁘게 점쳐댔습니다. React 개발자들은 정말 미래가 없는 걸까요?

그건 아닙니다. SSR의 장점이 부각되었을 뿐이지, 단점이 없는 것은 아니니까요.

SSR의 단점을 다시 한 번 더 짚어봅시다. 서버부하가 대표적 단점이겠고요, 서버 관리가 어려운 것도 포함됩니다.

또 페이지와 페이지 사이 로딩타임이 느립니다. CSR의 경우 초기로딩이 오래걸리지만 페이지 넘김은 빠르거든요.

 

또한, 이미 CSR로 개발이 되어 성장한 웹서비스들이 너무 많습니다.

초기로딩 속도의 경우 Code Splitting을 통해 해결할 수 있었고, SEO에 관해서는 단점이 이전까진 크게 부각되지 않았으니까요.

이러한 상황에서 무작정 SSR로 되돌아가고, 개발해놓았던 state 로직들을 없애버리고, 백엔드단에서 모든걸 재구현하며 서버자원까지 늘릴 수 있는, 설사 가능하다 해도 실행에 옮길 기업은 없다고 해도 무방합니다.

그러므로 누군가가 '리액트가 아닌 넥스트를 배워야할까요?' 라고 물었을 때 저의 대답은 당연히 '둘 다 배워라' 일 것입니다.

3. SEO 극복을 위한 방법

그렇다면 우리는 무엇을 해야할까요? 우리가 리액트로 개발한 웹서비스 제공자라면 무엇을 할까요?

바로 서드파티를 통한 SEO 극복입니다. CSR의 한계를 React 내에서 극복할 수는 없습니다. React는 CSR 라이브러리이니까요.

이 섹션에서는 SEO 솔루션들을 알아보겠습니다.

3-1. Algolio

서버의 데이터를 알고리아로 보내면, 전송된 데이터들을 검색가능하게 만들어주는 검색엔진 솔루션 입니다.

알고리오는 그 받은 데이터들을 검색 인덱스에 저장을 해주면, 유저들이 검색했을 때 데이터를 리턴해줍니다.

러닝커브가 없고 개발자 친화적인 서비스이며, 성능이 매우 좋습니다.(밑에 나오는 Elasticsearch보다 200배 빠름)

3-2. Amazon CloudSearch

마찬가지로 비슷한 기능을 제공해줍니다.

예상할 수 있듯이 AWS 생태계와 매우 잘 어울리기 때문에 인프라가 아마존생태계로 구성되어 있다면 좋은 옵션이 될 수 있습니다.

큰 데이터셋도 처리를 잘 해주고, 관리형 서비스라는 강점이 있습니다.

3-3. Elasticsearch

소개해드릴 서비스들 중 유일한 오픈소스 검색엔진이네요. 그만큼 다른 서비스들보다 선호되는 경향이 있습니다.

큰 데이터셋이나, 커스터마이징에 대한 유연성이 많이 요구될 때 강점이 있습니다만 다소 러닝커브가 있을 수 있습니다.

 

4. 결론

저도 저러한 서비스를 모두 써 본 건 아닙니다. 저는 기업 경험이 없기 때문이죠. 다만 이런 부분에 대한 고민을 이제까지 한 번도 안해봤다는 점에서는 스스로를 되돌아보게 되네요. 좋은 인사이트를 가진 유튜버를 찾아 기분이 좋네요! 제 글도 저 유튜버분의 영상처럼 도움이 되는 글이었으면 좋겠습니다.