SPA에서 SEO 적용을 위해 시도했던 것들

회사 프로젝트에서 SPA(react)구조의 한계 속에서도 SEO(Search Engine Optimization)를 적용해보기 위해 여러 가지 방법을 시도해보았습니다. 아래는 그 과정에서 테스트해본 내용과 결과입니다.

 

react-helmet-async 도입

• SEO를 위해 가장 먼저 시도한 건 react-helmet-async 라이브러리였습니다.
• 해당 라이브러리를 통해 페이지별로 meta 태그를 동적으로 변경할 수는 있었지만 SPA 특성상 실제 HTML 파일이 하나의 index.html로 구성되어 있기 때문에 브라우저나 봇 크롤러는 여전히 동일한 문서만 바라보게 됩니다.
• 즉, URL을 공유하거나 크롤링될 때, 실제 화면에는 동적으로 바뀐 meta 태그가 반영되었더라도 크롤러 입장에서는 적용된 내용을 읽을 수 없습니다.
• 결론: SEO 효과는 기대하기 어렵고, SSR(서버사이드 렌더링)이나 프리렌더링이 아닌 이상 구조적으로 한계가 존재합니다.

 

react-snap (프리렌더링) 시도

• 두 번째로 시도한 방법은 react-snap을 통한 프리렌더링(Pre-rendering) 방식이었습니다.
• 이는 빌드 시점에 각 라우트를 렌더링해서 정적인 HTML로 저장해주는 방식으로, 크롤러가 컨텐츠를 인식할 수 있도록 도와줍니다.
• 실제로 결과물은 정적으로 잘 생성되었지만,
  • 5년 이상 유지보수가 중단된 라이브러리이고,
  • 에러 발생 시 해결 방법이 거의 없어 디버깅에 큰 어려움을 겪었습니다.
  • 또한, 사용자와의 상호작용이나 JS 기반 동작은 포함되지 않기 때문에 제한적인 SEO 적용에 그칩니다.
• 결론: 리스크가 크고 안정성이 떨어져 도입을 보류했습니다.

 

Next.js로의 전환 고려

• SEO와 퍼포먼스를 모두 고려한다면 가장 확실한 해답은 Next.js와 같은 SSR 지원 프레임워크를 도입하는 것
• 하지만 저희 프로젝트는 이미 React.js 기반으로 운영되고 있어, 전체 구조를 Next.js로 마이그레이션해야 하는 상황
• 초기 도입 비용, 기존 구조와의 충돌, 유지보수 이슈 등을 고려했을 때 현재로서는 도입이 현실적으로 어렵다고 판단했습니다.

 

결론

React 기반 SPA에서 SEO를 적용하는 것은 구조적인 한계로 인해 쉽지 않다는 걸 느꼈다