[기술 정리] SSR과 CSR

1. SSR (Server-Side Rendering)

정의

장점

• SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리: 페이지가 서버에서 완성된 상태로 전달되므로 검색 엔진이 페이지 내용을 쉽게 인식할 수 있다.

• 빠른 초기 렌더링: 서버가 HTML을 렌더링해 전달하므로 초기 로딩 속도가 빠르다.

• 저사양 기기에서 효율적: 클라이언트 측의 처리 부담이 적다.

단점

• 서버 부하 증가: 모든 요청마다 서버에서 페이지를 렌더링하기 때문에 서버 자원을 많이 소모한다.

• 상호작용 지연: HTML은 빠르게 전달되지만, 클라이언트 측에서 JavaScript가 로드되고 이벤트가 활성화되는 데 시간이 걸릴 수 있다.

• 복잡한 상태 관리: SSR과 클라이언트 측 상호작용을 함께 구현해야 하므로, 애플리케이션 상태 관리가 복잡해질 수 있다.

2. CSR (Client-Side Rendering)

정의

장점

• 상호작용이 빠름: 페이지 내에서의 탐색이나 상호작용이 서버와의 통신 없이 클라이언트에서 즉시 이루어진다.

• 서버 부담 감소: 서버는 초기 HTML과 JavaScript만 제공하고 이후 렌더링 작업은 클라이언트에서 수행하므로 서버 부담이 적다.

• 동적인 페이지 처리에 유리: 실시간 데이터 업데이트나 사용자 상호작용이 많은 애플리케이션에 적합하다.

단점

• SEO에 불리: 초기 HTML에는 콘텐츠가 없고, JavaScript가 실행된 이후에 콘텐츠가 렌더링되므로, 검색 엔진이 콘텐츠를 인식하기 어렵다.

• 초기 로딩 지연: JavaScript 파일 로드 후 페이지를 렌더링하기 때문에 초기 로딩 시간이 길다.

• 기기 성능에 의존: 클라이언트에서 렌더링을 처리하므로, 저사양 기기에서는 성능이 저하될 수 있다.

3. SSR과 CSR의 차이점