react 서버 컴포넌트 SEO 성능 차이있나요?

안녕하세요! 저도 전문가는 아니지만 이해하는바를 공유하자면, SEO 관점에서 페이지가 크롤링이 잘되기 위해서 SSR은 계속 사용하지 않을까 싶고 서버 컴포넌트의 경우도 필요하면 같이 사용될 것 같아요. 다만 최초 렌더시에 서버 컴포넌트는 말씀하신것처럼 로딩 상태가 있지 않을까 싶네요. 여러 요인에 따라 달라질 수는 있지만, SEO 관점에서 SSR로 내려주는 html에 최대한 많은 정보를 포함하는게 더 좋습니다. 참고하시면 좋을 것 같은 링크 첨부할게요! - https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense

> SEO 관점에서 크롤봇이 서버 컴포넌트가 있는 페이지를 크롤링하는 경우, 서버 컴포넌트의 데이터를 받아오기 전까지는 loading 상태를 보여주는건가요? loading 상태를 보여주는건 Suspense로 감싸진 컴포넌트를 불러올 때입니다. 크롤러 입장에서는 HTML 파일을 요청하고 응답을 받아오는 방식, 즉 React가 아닌 일반적인 사이트와 동일한 방식으로 사이트를 해석합니다. > 기존 next에서 하던 SSR 보다 서버 컴포넌트로 구성하는게 SEO 관점에서 더 뛰어난가요? 네, 서버 컴포넌트를 포함해서 Next.js 13에서 사용 가능한 이 네 가지 기능이 SEO를 이전보다 더 향상시켰다고 합니다. - React server components - Streaming UI chunks - Updated Next Image component - Next Font component https://www.freecodecamp.org/news/nextjs-seo/ 이 글을 보시면 질문자 분이 궁금해하시는 내용들이 잘 정리되있습니다. https://github.com/vercel/next-react-server-components 요기 Next.js에서 공개한 데모가 있는데요. `npm run build` 실행하셔서 직접 빌드도 해보시고, .next 폴더에서 어떤 마크업이 생기는지도 한 번 확인해보시고, 개발자 도구에서 네트워크 탭 열어서 어떤 데이터를 주고 받는지 한 번 직접 확인해보세요. 아직 베타 버전이라서 써 본 사람이 많이 없기 때문에 직접 보시는 게 제일 정확합니다.

React Server Components는 React 18에서 소개된 기능으로, 서버에서 렌더링된 컴포넌트를 클라이언트에 전달하게 됩니다. 이를 통해 초기 로딩 시간과 전송되는 데이터량이 줄어들며, 전체적인 성능 향상을 기대할 수 있습니다. 하지만, React Server Components와 SEO의 관계를 논하기 전에 몇 가지 사항을 고려해야 합니다. 1. React Server Components는 아직 실험 단계에 있으며, 모든 웹 애플리케이션에 완벽하게 적용하기엔 미숙한 측면이 있습니다. 2. 서버 컴포넌트가 있는 페이지를 크롤링하는 경우, 서버 컴포넌트는 서버에서 렌더링되기 때문에 크롤러가 컴포넌트의 데이터를 받아오기 전에 로딩 상태를 보여주지 않습니다. 크롤러는 이미 렌더링된 HTML 문서를 수집하므로, 데이터를 받아올 때까지 대기하지 않습니다. 3. Next.js에서 제공하는 SSR과 비교할 때, React Server Components는 페이지의 일부분만 서버에서 렌더링할 수 있어 더 세밀한 최적화를 할 수 있다는 장점이 있습니다. 하지만 SEO 측면에서 볼 때 두 방식 모두 검색 엔진 크롤러에게 완전한 HTML 문서를 제공하기 때문에 큰 차이는 없습니다. 결론적으로, React Server Components는 웹 애플리케이션의 성능을 향상시킬 수 있는 기술이지만, SEO 측면에서는 기존의 SSR과 큰 차이가 없습니다. React Server Components가 안정화되고 보다 많은 사례가 나오면, 그 때 SEO와의 관계에 대해 더 명확하게 이해할 수 있을 것입니다.