CSR과 SSR의 차이 (리액트)

CSR(Client-Side Rendering) vs SSR(Server-Side Rendering)

CSR (Client-Side Rendering)

• 개념: 웹 페이지의 렌더링을 클라이언트(브라우저)에서 처리하는 방식.
• 동작 원리: HTML 문서 로드 후, JavaScript가 실행되어 페이지의 UI를 렌더링하고 데이터를 채워주는 방식.
• 장점:
  • 빠른 인터랙션: 처음 로드 이후에는 클라이언트에서 처리되므로 페이지 전환이 빠름.
  • 리치 인터페이스: React 같은 프레임워크와 함께 사용하여 더 다이나믹한 사용자 경험 제공 가능.
  • 리소스 절약: 서버는 초기 HTML만 전달하고 나머지는 클라이언트에서 처리.
• 단점:
  • SEO 문제: 크롤러는 기본적으로 자바스크립트를 실행하지 않기 때문에, 초기 HTML이 비어있어 SEO에 불리함.
  • 초기 로드 속도: 처음 페이지를 로드할 때, 모든 JS 파일을 다운로드하고 실행해야 하므로 시간이 오래 걸릴 수 있음.

---

SSR (Server-Side Rendering)

• 개념: 웹 페이지를 서버에서 미리 렌더링하여 HTML을 완성한 상태로 클라이언트에 전달하는 방식.
• 동작 원리: 서버가 요청을 받으면, JavaScript를 실행하여 페이지를 렌더링하고 완성된 HTML을 클라이언트에 보내줌.
• 장점:
  • SEO 친화적: 서버에서 완성된 HTML을 제공하기 때문에 검색 엔진이 쉽게 크롤링 가능.
  • 초기 로드 속도: 클라이언트는 바로 완성된 HTML을 받아보므로, 첫 화면 로드가 빠름.
• 단점:
  • 서버 부하: 모든 요청에 대해 서버에서 페이지를 렌더링해야 하므로, 서버 자원이 많이 사용됨.
  • 인터랙션 느림: 클라이언트에서 추가적으로 데이터를 가져오거나 렌더링할 때 추가적인 처리 시간이 필요할 수 있음.

---

리액트에서의 CSR vs SSR

• React에서 CSR: 일반적으로 React 애플리케이션은 CSR로 동작하며, create-react-app으로 생성한 프로젝트가 기본적으로 CSR.
• React에서 SSR: SSR을 사용하려면 Next.js 같은 프레임워크를 사용. 이는 서버에서 React 컴포넌트를 렌더링한 후 클라이언트에 전달.