서버 사이드 렌더링(Server Side Rendering) VS 클라이언트 사이드 렌더링(Client Side Rendering)

렌더링이란?

=> 서버로부터 받은 내용을 브라우저 화면에 표시하는 것

 

사용자가 볼수 있는 화면을 렌더링 하는 위치가 서버인지 클라이언트인지에 따라

서버 사이드 렌더링과 클라이언트 사이드 렌더링으로 구분됨

 

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

서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링하는 방식

 

과정

1) 클라이언트 => 초기화면을 load하기 위해 서버에 요청 보냄

2) 서버 => 화면에 표시하는 데 필요한 데이터를 얻어와 모두 삽입하고 css까지 적용해 렌더링 준비를 마침

            HTML과 JS코드를 브라우저에 응답으로 전달

3) 브라우저는 전달받은 페이지를 바로 띄우고 JS 코드 다운로드 후 html에 실행

 

4) 여기서 만약 세모를 네모로 변경하고 싶다면?

=> 세모 뿐만 아니라 동그라미, 마름모까지 모두 서버로부터 다시 다운받아 옴.

 

장점

• 모든 데이터가 이미 HTML에 담겨진채로 브라우저에 전달되기 때문에 빠른 초기 로딩, 검색엔진 최적화(SEO)에 유리

검색엔진 최적화

: 검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업

 

단점

• 프로그램의 복잡도
• 페이지 이동 시 화면이 깜빡 거림(변경사항이 생기면 모두 서버로부터 다시 다운을 받아야 하기 때문)
• 서버 렌더링에 따른 부하 발생
• 페이지 요청마다 페이지 새로고침 발생

 

 

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

: 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식

 

장점

• 변경된 부분과 관련된 데이터만 가져오기 때문에 빠른 속도와 서버 부하 감소(서버 사이드 렌더링보다 빠름)
• 사용자 친화적(페이지 안 컨텐츠를 클릭하여 다음 단계로 전환하는 과정에서 깜빡이 없이 부드러운 이동 가능)

단점

• 초기에 모든 js파일을 다운받아와야 하기 때문에 초기 로딩 속도가 오래걸림
• 검색엔진 최적화에 불리(자바스크립트를 사용하여 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에)

 

렌더링 방식 선택 기준?

 : 서비스, 프로젝트, 콘텐츠의 성격에 따라 달라짐

 

 

※ 기술 면접 대비 질문

CSR과 SSR의 차이점에 대해 설명해 주세요.

클라이언트 사이드 렌더링은 서버에서 한번에 HTML 및 자바스크립트를 다운받고, api 데이터도 다 로드가 된 상황에서 렌더링을 하는 것을 뜻합니다. 싱글 페이지 웹을 만들기 위해서 CSR의 중요성이 대두가 됐는데, 초기 로딩 시간이 너무 길고 검색 엔진에 최적화되지 못한다는 단점이 있습니다.

 

서버 사이드 렌더링은 서버 측에서 필요한 데이터들을 넣은 페이지를 만들어 HTML을 보내서, 클라이언트 단에서는 HTML 렌더링만 하면 되므로 유저 입장에서 화면을 바로 볼 수 있고, 이벤트가 발생하거나 페이지를 옮기는 그런 필요에 따라 추가적으로 요청을 통해 데이터를 전해주게 됩니다. 하지만 결국 이도 깜빡임(Blinking) 이슈가 있고, 서버에 과부하가 올 수 있는 단점이 있기 때문에, 두 가지를 잘 선택하거나 혼합해서 사용하는 추세입니다.

 

참고자료

 

https://programming119.tistory.com/236

https://miracleground.tistory.com/165