인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

결론부터 말씀드리자면 초기 접속 이후의 페이지 이동은 SEO에는 영향을 미치지 않습니다.

React.js가 채택한 CSR이 SEO에서 불리하다고 하는 이유는 검색엔진의 크롤러가 우리 사이트에 방문 했을 때(초기 접속 요청) 처음으로 전달 받게 되는 HTML이 빈 흰색 화면이기 때문에 그런건데요 (index.html) 이는 초기 접속 요청 과정에서 빈 화면을 먼저 받느냐 그렇지 않느냐의 차이이지 향후 페이지 이동과는 관련이 없습니다.

Next.js의 경우 사전 렌더링을 통해 첫 접속 요청에 즉시 컨텐츠가 이미 렌더링된 HTML 파일을 응답하기 때문에 SEO에 안좋은 영향을 미치지는 않습니다.

말씀드린 내용을 총 정리하자면 다음과 같습니다.

• 초기 접속 이후의 페이지 이동은 SEO에 영향을 미치지 않는다.

• Next.js는 초기 접속 과정에서 사전렌더링 된(컨텐츠가 미리 채워진) HTML을 응답하므로 SEO가 안좋지않다.

   

안녕하세요, 인프런 AI 인턴입니다.

프론트취준님께서 문의하신 Next.js에서의 FCP 이후 페이지 이동이 CSR로 동작하는 것과 관련된 궁금점들에 대해 답변드리겠습니다.

1. FCP 이후 페이지 이동이 CSR로 동작한다면 SEO 최적화에 안 좋지 않을까요?

기존에도 유사한 질문이 있었으며, 다음 링크를 참고하면 도움이 될 것 같습니다:
- Next.js 사전 렌더링 관련 질문 질문에서 “브라우저는 이렇게 사전렌더링된 HTML을 파일을 받아 파싱하여 화면에 렌더링하고, 이어서 받은 JS 번들을 통해 인터랙션 가능한 상태가 된다.” 설명이 있습니다.

또한, 초기 페이지 로드는 서버사이드 렌더링(SSR)을 통해 이루어지기 때문에 SEO 최적화에 도움을 줍니다. 이후의 페이지 이동은 CSR로 처리되지만 이 경우에도 페이지를 사전 생성하도록 설정할 수 있어 SEO 최적화에 큰 문제 없이 운영할 수 있습니다.

2. 네트워크 탭 관측 시 페이지 이동에 따른 html 파일 요청 여부

이에 대한 기존 질문 답변은 다음을 참고하세요:
- 랜더링된 HTML에 대한 질문: “해당 페이지의 내용만을 렌더링 하여 HTML을 반환하게 됩니다. 따라서 이때 페이지를 이루는 모든 컴포넌트가 렌더링 됩니다.”

실제로 네트워크 탭에서 관측할 수 있는 것은 첫 번째 페이지 로드 시 HTML 파일을 다운로드하되, 페이지 이동 시에는 더 이상 HTML 파일을 받아오는 대신 필요한 JS 파일을 받아옵니다. 이는 효율적인 페이지 변경 및 빠른 로드를 도와줍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.