Next.js에서 액세스 수가 증가한 이야기

이 기사는 Next.js Advent Calendar 2019 13일째 기사입니다.

React로 그린 페이지의 검색 유입이 저하된 것을 Next.js에서 개선한 이야기입니다.

시작은 항상 갑자기

일반적인 상황에서 간편한 스크래핑 대책으로 HTML + React.js로 만든 BtoB 용 웹 사이트가있었습니다.
Google의 말을 지키고 Lighthouse의 Performance Scores의 SEO는 100으로 운영하고있었습니다.



컨텐츠의 충실화를 도모해, 검색 유입도 오른쪽 어깨 올라서 매우 기쁜 결과가 되고 있었습니다.


그러나 그날은 갑자기 왔습니다.
Google 님이 싫어해 버려 검색 유입이 가쿵으로 1/5까지 떨어졌습니다.

즐거움

프로젝트의 멤버는 대황입니다.

「최근의 릴리스로 변경점 있었습니다만⁉」
「아니, 콘텐츠의 추가 밖에 하지 않습니다. SEO 대책은 되어 있을 것입니다」
"Google 크롤러의 사양 변경입니까?"

그래서 실제로 Lighthouse의 결과를 확인해 보면 변화는 보이지 않았습니다.
그러나 Fetch as Google의 결과를 보면 React를 사용하여 동적으로 그린 ​​내용의 내용이 잘 표시되지 않았습니다. 콘텐츠 그리기 전의 골격만이 허위로 표시되어 있어 콘텐츠의 내용이 없는 사이트로서 인식되어 버렸습니다.

「React의 묘화 기다리고 있지 않네요. 이거・・・」
「정적인 페이지에는 하고 싶지 않아」
"뭔가 치는 사람이 있는지 찾아 보겠습니다."

그럴 때 Next.js의 소문을 듣고 Next.js라면 기존 React의 자산을 활용하면서 SSR로 이행하여 정적으로 내고 싶지 않은 부분은 Dynamic Import로 동적으로 그릴 수 있다고 목표가 서 있었다.
최종 구성은 AWS Lambda를 통해 React + Redux를 Next.js에서 SSR하는 구성으로 변경했습니다.
또한 Amazon CloudFront를 사용하여 콘텐츠를 배포하고 성능을 개선했습니다.

"이제 구글 크롤러를 위해 할 수 있었던 일은 했어요."
"그 후에는 크롤러님의 판단을 기다리자"

Next.js에서 SSR 한 결과

Next.js로 이동한 결과, 검색 유입이 출시된 다음 날부터 오른쪽 어깨 상승으로 바뀌었습니다.



Lighthouse의 결과도 향상되었으며 콘텐츠의 첫 번째 보기까지의 시간도 40% 향상되었습니다.



검색 유입수는, 1/5까지 떨어진 곳에서 7배 정도까지 상승과 이행 전의 최대치를 순식간에 갱신하는 결과가 되었습니다.

결론

SEO 대책은 전제 밖에 없고, 콘텐츠의 내용을 크롤러가 정체없이 해석할 수 있는 형태로 내 주는 것이 중요하다고 통감했습니다.
Next.js는 기존의 React 컴포넌트를 그대로 마이그레이션할 수 있었기 때문에 정말 편리했습니다.
SPA로 만들고 있는 사이트나 React로 동적으로 묘화하고 있는 사이트의 참고가 되면 다행입니다.