SSR & CSR

서버 사이드 렌더링(Server Side Rendering, SSR)과 클라이언트 사이드 렌더링(Client Side Rendering, CSR)

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)은 웹 애플리케이션에서 콘텐츠를 렌더링하는 두 가지 주요 방식이다. 각각의 개념, 특징 및 차이점을 알아보자.

서버 사이드 렌더링 (Server Side Rendering, SSR)

개념

SSR은 웹 서버가 HTML 콘텐츠를 생성하여 클라이언트(브라우저)로 전송하는 방식이다. 서버에서 모든 HTML이 준비되어 전송되기 때문에 브라우저는 HTML을 받아 바로 렌더링할 수 있다.

특징

• 빠른 초기 로드 시간 : 서버에서 완성된 HTML을 전송하기 때문에 첫 페이지 로드가 빠르다.

• 검색 엔진 최적화(SEO) : 검색 엔진 크롤러가 완전한 HTML을 인덱싱할 수 있어 SEO에 유리하다.

• 낮은 코드 복잡성 : 클라이언트 측에서 복잡한 자바스크립트 코드가 필요하지 않다.

클라이언트 사이드 렌더링 (Client Side Rendering, CSR)

개념

CSR은 브라우저가 자바스크립트 코드를 다운로드하여 실행하면서 HTML을 동적으로 생성하는 방식이다. 서버는 주로 JSON 데이터를 전송하며, 브라우저는 이를 기반으로 콘텐츠를 렌더링한다.

특징

• 뛰어난 상호작용 : CSR은 사용자와의 상호작용이 많은 애플리케이션에 적합하다. 자바스크립트를 이용해 페이지 일부를 동적으로 갱신할 수 있다.
• 초기 로드 시간 지연 : 초기에는 자바스크립트 파일을 모두 다운로드하고 실행해야 하기 때문에 첫 페이지 로드가 느릴 수 있다.
• 불리한 검색 엔진 최적화(SEO) : 검색 엔진 크롤러는 자바스크립트를 실행하지 못하기 때문에, 초기 로드 시에 HTML이 비어있을 수 있어 SEO에 불리할 수 있다. (이 문제는 최근 서버에서 미리 렌더링하는 방식인 하이브리드 렌더링으로 개선 가능하다.)

차이점

초기 로드 시간

• SSR: 초기 로드가 빠르며, 서버에서 이미 렌더링된 HTML을 받는다.
• CSR: 자바스크립트를 다운로드하고 실행해야 하므로 초기 로드가 느리다.

검색 엔진 최적화(SEO)

• SSR: 검색 엔진이 완성된 HTML을 인덱싱할 수 있어 SEO에 유리하다.
• CSR: 초기 로드 시 HTML이 비어 있을 수 있어 SEO에 불리하다.

사용자 경험

• SSR: 초기 로드가 빠르지만 페이지 전환 시 서버 요청이 필요해 느릴 수 있다.
• CSR: 초기 로드는 느리지만, 한 번 로드된 이후에는 페이지 전환이 빠르다.

복잡성

• SSR: 서버 쪽에서 렌더링을 처리하기 때문에 클라이언트 측 코드가 단순하다.
• CSR: 클라이언트 측에서 렌더링을 처리하기 때문에 복잡한 자바스크립트 코드가 필요하다.

요약

• SSR: 서버에서 HTML을 렌더링하여 클라이언트에 전송. 초기 로드가 빠르고 SEO에 유리하지만, 상호작용이 적은 웹사이트에 적합하다.
• CSR: 클라이언트에서 자바스크립트를 이용해 HTML을 동적으로 생성. 초기 로드가 느리지만 상호작용이 많고 동적인 웹 애플리케이션에 적합하다.

최근에는 두 가지 방식의 장점을 결합한 하이브리드 렌더링 방식을 사용하는 경우도 많다.
예를 들어 Next.js와 같은 프레임워크는 초기에는 SSR을 사용하고, 이후에는 CSR을 사용하는 방식으로 웹 애플리케이션을 최적화한다.