[ React 블로그 개발 ] 블로그 개발 Next로 이전
React의 SEO 한계와 Next.js 도입 이유
블로그 개발을 시작할 때, React를 사용하는 것이 트렌드이자 가장 익숙한 선택이었습니다. 효율적인 컴포넌트 구조와 풍부한 에코시스템 덕분에 개발 속도도 빨랐고, 복잡한 UI도 비교적 쉽게 만들 수 있었습니다. 하지만 프로젝트가 점차 완성되어가면서, 한 가지 중요한 문제에 부딪혔습니다. 바로 검색 엔진 최적화(SEO) 였습니다. Next.js로 이전 후에 React 블로그 개발에 대한 포스팅을 추가로 작업해볼 예정입니다.
1. React가 SEO에 불리한 이유
React는 기본적으로 클라이언트 사이드 렌더링(Client-Side Rendering, CSR) 방식을 사용합니다. 쉽게 말해, 사용자가 브라우저로 웹사이트에 접속했을 때, 서버에서는 최소한의 HTML만 보내주고, 실제 콘텐츠는 자바스크립트가 실행된 뒤에야 그려집니다. 이 구조는 사용자 경험(UX)에는 유리할 수 있지만, SEO 관점에서는 여러 한계가 있습니다.
- 검색엔진 크롤링 한계 구글 등 메이저 검색엔진은 자바스크립트도 어느 정도 해석할 수 있지만, 모든 검색엔진이 그렇지는 않습니다. 특히 네이버, 빙 등 일부 엔진은 자바스크립트 실행 이전의 HTML만 수집할 수 있어, 콘텐츠가 없는 빈 HTML이 노출될 수 있습니다.
- 메타 태그, OG 태그 반영 어려움 CSR에서는 동적으로 생성된 메타 정보(제목, 설명, 오픈그래프 이미지 등)가 검색엔진이나 SNS 미리보기에서 잘 반영되지 않는 경우가 많습니다.
- 초기 로딩 속도 서버에서 콘텐츠가 바로 렌더링되어 오는 SSR(Server-Side Rendering)에 비해, CSR은 자바스크립트 파일을 모두 내려받고 실행해야 콘텐츠가 보입니다. 이로 인해 초기 로딩 속도가 느려지고, SEO 점수에도 악영향을 줄 수 있습니다.
이러한 이유로, 블로그처럼 검색 노출이 중요한 서비스에는 React의 기본 CSR 방식만으로는 한계가 명확하다고 느꼈습니다.
2. Next.js로 변경하려는 이유
이러한 문제점을 해결하기 위해, 최근에는 Next.js와 같은 프레임워크가 많이 사용되고 있습니다. 저 역시 블로그 프로젝트를 Next.js로 이전하는 것을 적극적으로 검토하고 있습니다.
- SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성) 지원 Next.js는 페이지를 서버에서 미리 렌더링해주거나, 빌드 시점에 정적인 HTML 파일로 만들어줍니다. 덕분에 검색엔진이 콘텐츠를 쉽게 인식할 수 있습니다.
- 동적 라우팅, SEO 최적화 기능 내장 각 포스트마다 URL과 메타 태그를 손쉽게 커스터마이징할 수 있고, sitemap, robots.txt 등 SEO 필수 기능도 쉽게 적용할 수 있습니다.
- 빠른 빌드와 배포, 사용자 경험 향상 정적 파일로 배포할 수 있어 속도도 빨라지고, 서버 부담도 줄일 수 있습니다. 또한, 이미지 최적화, 코드 분할 등 다양한 성능 최적화 기능이 내장되어 있습니다.
마치며
React로 블로그를 개발하는 과정에서 많은 것을 배웠지만, SEO의 한계를 몸소 체감할 수 있었습니다. 더 많은 사용자에게 내 글과 정보가 도달하기 위해서는, 기술적인 변화와 선택이 필요하다고 생각합니다. 앞으로는 Next.js를 활용해 SSR/SSG를 적용하고, 검색엔진과 사용자 모두에게 더 좋은 블로그로 발전시켜 나가고자 합니다.