SSR vs CSR

SSR

Server Side Rendering 의 줄임말 입니다. 

자바스크립트가 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링을 합니다.

 

예를 들어서, 온라인에서 가구를 주문 했을 때 배송 출발지에서 조립을 완료한 상태로 보내는 것입니다.

 

브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다.

서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됩니다.

 

만약, 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를

완전히 렌더링된 페이지로 변환한 후 브라우저에 응답으로 보냅니다.

 

서버는 사용자의 브라우저가 다른 경로로 이동할 때마다 이 작업을 다시 수행합니다.

 

 

CSR

Client Side Rendering 줄임말 입니다. 

클라이언트에서 자바스크립트가 페이지를 렌더링 합니다.

 

예를 들어서, 모든 부품이 최대한 나뉘어 운송이 쉬운 상태로 배송한 다음 집에서 조립하는 경우입니다.

 

1) 웹 브라우저의 요청을 서버로 보냄

2) 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보냅니다.

3) 이때 서버는 웹 페이지와 함께 자바스크립트 파일을 보냅니다.

4) 클라이언트가 웹 페이지를 받으면 웹 페이지와 함께 전달된 자바스크립트 파일은 브라우저에서 웹 페이지를

    완전히 렌더링 된 페이지로 바꿉니다.

 

 

 * 웹 페이지에 데이터베이스 데이터가 필요한 경우

1) 브라우저는 데이터베이스 저장된 데이터를 가져와 웹 페이지에 렌더링

2) 이때, API 가 사용됨

3) 브라우저가 다른 경로로 이동하면 서버가 웹 페이지를 다시 보내지 않습니다.

4) 브라우저는 브라우저가 요청한 경로에 따라 페이지를 렌더링합니다.

 

 

차이점

주요 차이점은 페이지가 렌더링 되는 위치입니다.

SSR 은 서버에서 페이지를 렌더링, CSR 은 브라우저에서 페이지를 렌더링합니다.

 

 

SSR 을 사용할 경우

자원이용이 서버에 집중되기에 애플리케이션 유지비용이 높습니다.

일부 서드파티 자바스크립트 라이브러리의 경우 서버 사이드 렌더링이 불가능할 수 있습니다.

 

CSR 을 사용할 경우

사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다.

웹 애플리케이션을 제작하는 경우, CSR 을 이용해 더 나은 사용자 경험을 제공할 수 있습니다.

 

 

예시

SSR 예시

네이버 블로그가 있습니다.

네이버에서 SSR 방식을 도입한 이유는 검색엔진 최적화에 유리한 이점이 있기 때문입니다.

블로그 같은 경우 검색 엔진에 많이 노출되는게 유리하고, 다른 웹사이트에 비해 사용자와 상호작용이 많지 않기 때문에

SSR이 합리적인 선택이 될 수 있습니다.

 

뉴욕 타임즈 홈페이지가 있습니다.

SSR의 대표적인 단점인 많은 사용자가 클릭할 때마다 전체 웹사이트를 다시 서버에서 받아오기 때문에 발생하는 서버 과부하

이슈가 있음에도 불구하고, CSR에 비해 초기 로딩 속도가 빨라서 구독자가 신문 기사를 빠르게 읽을 수 있다는 장점이 있습니다.

또한 신문사의 기사가 검색 엔진에 노출되는 것이 중요하기 때문에 SSR 을 이용하고 있습니다.

 

 

CSR 예시

아고다가 있습니다.

사실 아고다 뿐만 아니라 많은 예약 사이트가 CSR 을 사용하고 있습니다.

SSR 에서는 서버에서 렌더링을 해야 하기 때문에 상호작용이 많아질수록 서버에 부담이 많아집니다.

그래서 CSR 을 통해서 서버가 클라이언트에 필요한 데이터만 넘겨주기 때문에 부담이 적습니다.

그리고 SPA ( Single Page Application ) 를 기반으로 화면의 일부만 받아온 데이터로 변경해주기 때문에 빠른 렌더링으로

UX 에 유리합니다.