면접 - Next.js에서 SEO최적화

질문: Googlebot은 JavaScript 렌더링을 어느 정도까지 지원하는지 알고 계신가요? 그리고 Next.js 프로젝트에서 정말로 SEO를 극대화하려면 어떤 방식으로 구성하는 게 가장 이상적일까요?

⸻

답변 스크립트:
네, 현재 Googlebot은 JavaScript 렌더링을 일정 부분 지원하고 있습니다. 하지만 이 렌더링은 HTML 문서를 파싱한 후 별도의 렌더링 큐에 올라가서 처리되기 때문에, 실시간성이 떨어지고 복잡한 비동기 요청이 많을 경우 데이터를 완전히 수집하지 못할 가능성이 있습니다.
이런 이유로, SEO가 중요한 페이지에서는 CSR보다는 SSR이나 SSG 방식이 더 유리하다고 판단하고 있습니다.

Next.js에서는 이런 상황에 대응하기 위해 getStaticProps와 getServerSideProps를 적절히 활용할 수 있는데요.
예를 들어 검색 엔진 노출이 중요한 상품 상세 페이지나 블로그 글처럼 컨텐츠 기반 페이지는 SSR이나 SSG 방식으로 미리 렌더링해서 HTML을 만들어두고,
반대로 로그인 후 사용자 정보에 따라 달라지는 마이페이지 같은 경우는 CSR 방식으로 클라이언트에서 렌더링하는 식으로 구분해서 적용하고 있습니다.

실제로 제가 참여한 Next.js 프로젝트에서는 SSR 방식으로 처리한 페이지에 Head 컴포넌트나 next-seo 라이브러리를 활용해서 메타태그나 Open Graph 정보까지 명시했고, 이 덕분에 Google Search Console 기준으로 인덱싱 속도와 정확도가 향상된 경험이 있었습니다.

즉, Googlebot이 JS를 해석할 수 있다고 해도, 정확하고 빠른 SEO를 위해서는 SSR이나 SSG 방식의 전략적 선택이 가장 중요하다고 생각합니다