아무래도 React를 처음 접하면서 만들어 본 블로그라서 SEO(Search Engine Optimizaion)을 별로 염두에 두지 않은 실수로 큰 고생을 하고 있다 ㅠㅠ... 맨 처음에는 완전히 클라이언트 사이드 렌더링으로 만들었다. 그랬더니 구글 검색엔진에서 내 블로그에 올린 글들을 크롤링 하지 못한다. React Redux SEO 등의 키워드로 찾아보니, SSR(Server Side Rendering) 방식으로 변경해야 한다고 한다ㅡㅡ. React로만 만들었으면 좀더 간단했을텐데 React-Router로 클라이언트 사이드 라우팅과, Flux 아키텍처인 Redux로 data들을 관리하는 프로젝트여서 굉장히 헷깔렸다. 하루 종일 삽질을 반복한 끝에 반쯤 SSR방식으로 바꾸었다. 정확히 사이드바와 상단 네비게이션바까지 서버에서 렌더링을 하게 변경했다. 진짜 문제는 componentDidMount에서 게시글들을 fetch하는데 서버사이드에서는 componentDidMount가 호출되지 않는다는 사실이다. 좀 더 찾아보니 서버사이드에서 async data fetch 이후에 render해주는 방식을 구현해놓은 템플릿 프로젝트를 발견했다. (universal redux template) 시간날 때 연구좀 해봐야 할 것 같다.

고생한 결과, SSR 전환에는 성공했다. 클라이언트 렌더링일 때에는 텅 빈 HTML파일이 응답으로 돌아왔었는데, 이젠 제대로 된 컨텐츠가 채워진 상태로 응답된다.

검색엔진들에 크롤링 요청을 다시 하긴 했는데... 추이를 지켜봐야 할 것 같다.

하루정도 기다렸다가 검색해보니 정상적으로 구글 봇이 크롤링을 해서 색인을 생성한 모습이다. 아..러닝 커브가 정말 살벌하다. 처음 블로그를 만드시는 분들께는 그냥 처음부터 서버 렌더링을 염두에 두고 개발하시라는 말씀을 드리고 싶다..