[TIL]20240925 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 비교

SSR과 CSR은 웹 애플리케이션을 만들 때 중요한 선택지인데, 각각 장단점이 있어 상황에 따라 적절히 사용하는 것이 중요하다.

 

▶서버 사이드 렌더링(SSR)이란?

서버 사이드 렌더링(SSR)은 서버에서 HTML을 렌더링하고, 클라이언트로 전송하는 방식이다. 클라이언트는 단순히 서버로부터 받은 완성된 HTML을 브라우저에 보여준다. 클라이언트는 서버에서 생성한 결과물을 그대로 화면에 렌더링하기만 하면 된다.

 

▷동작 과정:

클라이언트가 서버에 HTTP 요청을 보낸다.

서버는 필요한 데이터를 DB에서 조회한 후, HTML 페이지를 완성하여 클라이언트에 전송한다.

클라이언트는 서버로부터 받은 HTML을 렌더링하여 화면에 보여준다.

 

▷장점

→ SEO(검색 엔진 최적화)에 유리하다. 서버에서 완성된 HTML이 전송되므로, 검색 엔진이 페이지 내용을 쉽게 크롤링할 수 있다.

→ 초기 로딩 속도가 빠르다. 서버에서 완성된 HTML을 즉시 전송하기 때문에, 브라우저가 받은 데이터를 바로 화면에 표시할 수 있다.

→ 저사양 장치에서도 동작이 용이하다. 클라이언트의 역할은 단순히 렌더링된 HTML을 보여주는 것이기 때문에, 클라이언트에서 복잡한 연산을 할 필요가 없다.

 

▷단점

→ 서버 부하 증가:

서버가 모든 요청에 대해 페이지를 생성하여 전송해야 하므로, 서버에 많은 부하가 걸릴 수 있다.

→ 동적인 페이지 처리가 복잡하다. 모든 데이터를 서버에서 처리해야 하므로, 자주 변경되는 데이터나 동적 컨텐츠의 처리가 복잡할 수 있다.

 

▶ 클라이언트 사이드 렌더링(CSR)이란?

클라이언트 사이드 렌더링(CSR)은 클라이언트에서 HTML을 렌더링하는 방식이다. 서버는 주로 데이터를 API로만 제공하고, 클라이언트가 JavaScript로 데이터를 받아서 화면에 그리는 역할을 한다. 이 방식은 최근 SPA(Single Page Application)에서 많이 사용된다.

 

▷동작 과정:

클라이언트가 서버에 요청을 보내면, 서버는 빈 HTML 페이지와 필요한 JavaScript 코드를 전송한다.

클라이언트는 이 JavaScript 코드를 실행하고, 필요한 데이터를 서버의 API로부터 받아온다.

클라이언트가 받은 데이터를 이용해 화면을 동적으로 구성한다.

 

▷장점

→ 동적인 페이지 구성이 용이하다. 클라이언트에서 데이터를 실시간으로 받아와 페이지를 업데이트할 수 있으므로, 자주 변경되는 데이터 처리가 쉽다.

→ 빠른 페이지 전환이 가능하다. 페이지를 새로고침하지 않고, JavaScript로 화면만 부분적으로 업데이트할 수 있다.

서버는 데이터를 API로만 제공하면 되기 때문에, API 서버와 클라이언트 간의 역할 분담이 명확해진다.

 

▷단점

→ 초기 로딩 속도가 느리다. 클라이언트가 페이지를 렌더링하기 위해 JavaScript 파일을 다운로드받고 실행하는 데 시간이 걸리므로, 사용자가 페이지를 바로 볼 수 없다.

→ SEO에 불리하다. 검색 엔진이 JavaScript를 실행하지 못하거나, 페이지의 완성된 HTML을 크롤링하기 어려워 검색 엔진 최적화에 불리할 수 있다.

→ 클라이언트 성능 의존:

클라이언트에서 많은 연산을 처리해야 하므로, 저사양 장치에서는 성능 저하가 발생할 수 있다.

 

▶ SSR과 CSR의 비교

구분	서버 사이드 렌더링(SSR)	클라이언트 사이드 렌더링(CSR)
렌더링 위치	서버에서 HTML을 생성	클라이언트에서 HTML을 생성
초기 로딩 속도	빠름	느림 (JavaScript 실행 후 렌더링)
SEO	유리	불리
서버 부하	증가	상대적으로 적음 (API만 제공)
동적 페이지 처리	어렵고 복잡	쉽고 유연
페이지 전환	전체 페이지 리로드	일부 페이지만 동적 업데이트
클라이언트 성능 의존성	적음	높음 (저사양 기기에서 느려질 수 있음)

 

▶ SSR과 CSR 선택 기준

SSR과 CSR 중 어느 것을 사용할지는 프로젝트의 특성과 요구사항에 따라 달라진다. 몇 가지 중요한 기준들을 통해 선택할 수 있다.

 

→ SEO가 중요한 경우:

검색 엔진에서 페이지를 쉽게 인덱싱할 수 있도록 해야 한다면 SSR이 유리하다. 예를 들어, 블로그나 전자 상거래 사이트는 SEO가 중요한 요소일 수 있다.

→ 동적 콘텐츠가 많은 경우:

자주 변경되는 데이터나 동적 콘텐츠가 많을 경우에는 CSR이 더 적합하다. 예를 들어, 소셜 미디어 플랫폼이나 데이터 시각화 도구는 CSR을 사용하는 것이 더 효율적일 수 있다.

→ 성능 고려:

저사양 클라이언트에서 애플리케이션을 실행해야 하는 경우 SSR이 더 나을 수 있다. 반대로, 클라이언트의 성능이 충분히 좋은 경우에는 CSR을 사용하여 서버 부하를 줄이는 것이 좋다.

→ 빠른 사용자 경험 제공:

사용자가 페이지 전환을 자주 하는 애플리케이션(SPA)에서는 CSR이 더 적합하다. 화면 전체를 새로고침하지 않고도 부드럽게 전환할 수 있기 때문이다.

 

▶하이브리드 방식 (서버 사이드 렌더링 + 클라이언트 사이드 렌더링)

최근에는 SSR과 CSR의 장점을 결합한 하이브리드 방식을 많이 사용한다. 첫 번째 요청에 대해서는 서버가 HTML을 렌더링해서 빠르게 사용자에게 보여주고, 이후의 페이지 전환이나 데이터 업데이트는 클라이언트에서 JavaScript를 통해 동적으로 처리하는 방식이다. 대표적으로 Next.js와 같은 프레임워크가 이러한 하이브리드 렌더링을 지원한다. 이를 통해 SEO 문제를 해결하면서도 사용자에게 빠르고 동적인 경험을 제공할 수 있다.

 

▶결론

SSR은 빠른 초기 로딩과 SEO에 유리하지만 서버에 부담을 줄 수 있고, CSR은 동적인 페이지 처리와 부드러운 사용자 경험을 제공하지만 초기 로딩이 느리고 SEO에 불리한 단점이 있다. 프로젝트의 특성과 요구사항에 맞춰 이 두 가지 방식 중 적절한 렌더링 방식을 선택하는 것이 중요하다.