SSR과 CSR의 비교 (SEO 측면)

🌐 배포 : https://ssrcsr.vercel.app/

---

⭐️ 소개

- 기간 : 2024. 10. 22. ~ 2024. 10. 24.

- 설명

구현 배경

Next.js App Router 환경에서 SEO 관점에서 SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)의 성능을 비교했습니다.
각각의 렌더링 방식이 페이지 초기 로딩과 검색엔진 최적화(SEO)에 미치는 영향을 분석하였습니다.

구현 방법

서버 컴포넌트인 SSR 페이지에서 데이터들을 react-query의 prefetch 기능을 사용.

클라이언트 컴포넌트인 SSRMovies,CSRMovies에서 useQuery를 사용해 데이터들 가져옴.

---

⭐️ 구성

Tech Stacks

Languages

Styles

Framework & Libraries

Version Control

Deployment

---

화면 구성

비로그인

메인화면	SSR or CSR 화면

---

개발자 도구의 미리보기

로그인 (사장님)

SSR	CSR

---

결론

SSR (Server-Side Rendering)

• 동작 원리 : 서버에서 HTML을 미리 렌더링하여 클라이언트에 전송합니다. 초기 페이지 로딩 시 자바스크립트가 로드되기 전에도 페이지의 콘텐츠가 HTML에 포함되어 있어, 검색엔진 크롤러가 콘텐츠를 쉽게 인덱싱할 수 있습니다.
  
• SEO 및 사용자 경험 : 초기 로딩 시 개발자 도구의 미리보기를 통해 SSR 페이지의 텍스트와 이미지가 바로 표시되며, 'loading' 화면이 없이 즉시 콘텐츠가 노출됩니다.

CSR (Client-Side Rendering)

• 동작 원리 : 자바스크립트가 실행되어 콘텐츠를 클라이언트 측에서 렌더링합니다. HTML이 아닌 빈 페이지를 먼저 로드하고, 이후 자바스크립트가 실행되면서 콘텐츠가 표시됩니다.
  
• SEO 및 사용자 경험 : 초기 로딩 시 'loading' 메시지가 표시되며, 이후 자바스크립트가 완료된 뒤에야 콘텐츠가 나타납니다. 검색엔진 크롤러가 페이지를 완전히 렌더링하기 어려워 SEO에 불리할 수 있습니다.

SSR은 서버에서 HTML을 미리 렌더링하여 클라이언트로 전송하기 때문에 검색엔진이 페이지를 크롤링할 때 완전한 HTML 콘텐츠를 바로 확인할 수 있습니다.
이로 인해 SSR 페이지는 SEO에 유리하며, 개발자 도구의 "미리보기"에서도 즉각적인 HTML 콘텐츠가 보여집니다.
이렇게 검색엔진이 콘텐츠를 쉽게 인식할 수 있으므로, SEO 최적화 측면에서 유리합니다.

반면 CSR은 초기 로딩 시 빈 HTML에 자바스크립트 파일만 전송하고, 클라이언트 측에서 콘텐츠를 동적으로 로드하기 때문에, 검색엔진이 페이지에 접근하는 순간 HTML에 실제 콘텐츠가 없을 수 있습니다.
이로 인해 SEO 측면에서 불리할 수 있으며, 개발자 도구 미리보기에서는 'loading...'과 같은 초기 상태만 표시될 수 있습니다.