본문 바로가기
Javascript

Client-side 렌더링 vs. Server-side 렌더링 ? CSR, SSR

by 즐코딩 2023. 2. 14.
반응형

Client-side 렌더링 vs. Server-side 렌더링?


웹을 공부하다 보면 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)이라는 용어를 만나게 됩니다.
이 용어는 사용자가 브라우저를 통해서 보게 되는 웹문서들을, 서버에서 완성해서 보내주느냐 아니면 사용자의 PC나 모바일 기기에서 완성해서 보여주느냐? 의 차이라고 보면 됩니다. 간단하죠?

이참에 간단하게 정리해 두고 넘어가기로 합니다.

서버 사이드 렌더링(SSR)


대표적이고 전통적인 방식입니다. 서버 사이드에서 동작하는 프로그래밍 언어를 통해 html 파일을 모두 생성한 후 사용자에게 보내주는 방식을 말합니다. 단점으로는 서버가 모든 일을 다 처리하기 때문에, 사용자가 몰리면 서버에 부하가 걸린다는 것이죠.

반면 서버에서 모든 데이터를 가공하고 문서를 생성해 주기 때문에, 어떤 동작들이 일어나게 되는지 클라이언트 측에서는 알 수 있는 방법이 없습니다. 때문에, 민감한 정보라면 상대적으로 보안에 유리하다고 볼 수도 있습니다.

서버에서는 주로 Java(Jsp), Python, php, asp 등의 언어가 동작하는 경우가 많은데, 최근에는 Javascript 또한 서버 사이드에서 동작하는 방식으로도 자주 사용됩니다.


장점:

  1. 느린 네트워크에서 성능 개선: SSR은 서버에서 페이지의 전체 HTML을 생성하기 때문에, HTML 페이지가 느린 네트워크에서 더 빠르게 로드되도록 합니다.
  2. SEO에 유리: 초기 페이지 로드에서 전체 HTML을 사용할 수 있기 때문에 검색 엔진이 SSR로 생성된 페이지를 더 쉽게 크롤링하고 색인을 생성할 수 있습니다.
  3. 접근성 개선: SSR로 생성된 페이지는 장애가 있거나(리더기 사용자 등) 대역폭이 제한된 사용자가 더 쉽게 액세스 할 수 있습니다.

단점:

  1. 서버 로드 증가: 서버에서 페이지의 전체 HTML을 렌더링하기 때문에 서버 리소스를 많이 사용하게 되어 서버에 많은 로드를 줄 수 있습니다.
  2. 느린 초기 로드 시간: 전체 HTML이 클라이언트로 전송되기 전에 서버에서 생성되어야 하므로 SSR 페이지의 초기 로드 시간은 CSR 페이지보다 느릴 수 있습니다.
  3. 더 복잡한 개발: SSR 구현은 서버분야에 대해 더 깊은 이해가 필요하므로 CSR을 구현하는 것보다 더 복잡합니다.


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


한 10여 년 전부터 Angular, React, VueJS 등을 주축으로 발전되어 온 방식인데요, 사용자의 브라우저에 웹문서 템플릿과 데이터를 내려주고 사용자의 브라우저에서 화면을 렌더링 하도록 서비스하는 방식입니다. 최근에 SveltKit도 뜨고 있고, 아무튼 이루 말할 수 없도록 복잡해진 춘추전국시대를 만든 장본인은 바로 Javascript에 뿌리를 둔 녀석들입니다.

장점으로는 서버와의 통신 없이 화면 렌더링을 하게 되므로, 화면의 변화나 전환 등이 빠르다는 장점을 갖습니다. 물론 서버에 주는 부하도 줄일 수 있겠구요. 다만 SEO(검색엔진 최적화) 영역에서 약점을 갖고 있기 때문에 최근의 트렌드에서는 다시 서버 사이드 렌더링으로 회귀하거나, 적절하게 CSR과 SSR을 혼용하여 운용하는 추세이긴 합니다.

장점:

  1. 빠른 초기 로드 시간: CSR은 페이지를 렌더링 하는 데 필요한 최소한의 HTML, CSS 및 JavaScript만 전송하므로 초기 로드 시간이 빨라집니다.
  2. 간단한 개발: CSR을 구현하는 것은 웹 애플리케이션의 클라이언트 측 구성 요소에 대한 깊은 이해만 필요하므로 SSR을 구현하는 것보다 간단할 수 있습니다.

단점:

  1. 느린 네트워크에서 성능 저하: CSR은 JavaScript에 의존하여 페이지 콘텐츠를 렌더링 합니다. 느린 네트워크에서는 속도가 느려져 사용자 성능이 저하될 수 있습니다.
  2. SEO에 상대적 취약: JavaScript가 실행될 때까지 전체 HTML을 사용할 수 없기 때문에 검색 엔진이 CSR로 생성된 페이지를 크롤링하고 인덱싱하는 데 어려움이 있을 수 있습니다.
  3. 접근성 감소: CSR로 생성된 페이지는 장애가 있거나 대역폭이 제한된 사용자가 페이지를 렌더링 하는 데 필요한 JavaScript를 실행하지 못할 수 있으므로 액세스 하기 어려울 수 있습니다.
  4. 결론적으로 SSR과 CSR 사이의 선택은 웹 애플리케이션의 특정 요구 사항에 따라 다릅니다. SSR은 느린 네트워크에서 더 나은 성능, 더 나은 SEO, 향상된 접근성이 필요한 웹 애플리케이션에 적합하며 CSR은 더 빠른 초기 로드 시간과 더 간단한 개발이 필요한 웹 애플리케이션에 적합합니다.


렌더링이란?


SSR이던 CSR이던 간에, 렌더링이라는 웹문서 화면을 생성하고 데이터를 바인딩하는 과정을 거치게 됩니다. 말이 어렵고 멋져 보여서 그렇지, 이미 다 알고 있는 내용들일 수도 있겠습니다.

아래 예제를 통해서, 데이터를 바인딩하는 과정을 실습해 보기로 합니다.

프로필-카드-템플릿에-서버에서-받은-데이터를-바인딩하는-예제
프로필 카드 템플릿에 서버에서 받은 데이터를 바인딩하는 예제

이런 카드 3장짜리 웹문서 템플릿을 만들고, 각각의 카드에 맞는 데이터를 바인딩하는 간단한 예제입니다.


사용된 이미지는 아래 첨부합니다.

1.jpg
0.02MB
2.jpg
0.02MB
3.jpg
0.02MB


Bootstrap을 불러와서 사용하는 문서입니다.

<body>
<div class="card-group container">
    <div class="card">
        <img src="1.jpg">
        <div class="card-body">
        <h5>Card title</h5>
        <p>키 : 000 Cm</p>
        <button class="btn btn-primary">프로필</button>
        </div>
    </div>
    <div class="card">
        <img src="1.jpg">
        <div class="card-body">
        <h5>Card title</h5>
        <p>키 : 000 Cm</p>
        <button class="btn btn-primary">프로필</button>
        </div>
    </div>
    <div class="card">
        <img src="1.jpg">
        <div class="card-body">
        <h5>Card title</h5>
        <p>키 : 000 Cm</p>
        <button class="btn btn-primary">프로필</button>
        </div>
    </div>
</div>
</body>


브라우저에서 실행을 해보면, 아래와 같은 템플릿이 만들어졌습니다.

카드-형태가-반복되는-HTML-템플릿
카드 형태가 반복되는 HTML 템플릿


그리고 아래와 같은 데이터를 서버에서 받아왔다고 가정을 해봅니다. 

<script>
    var girls = [ 
        { id : 0, tall : 164, name : '김소녀', photo : '1.jpg' },
        { id : 1, tall : 168, name : '박예쁜', photo : '2.jpg' },
        { id : 2, tall : 173, name : '신미녀', photo : '3.jpg' }
    ];
</script>


그러면, 이제 JS를 이용해서 Data들을 올바른 위치에 넣어줘야 하는데, 이 과정을 어렵고 멋진 말로 뭔가 좀 있어 보이게데이터 바인딩이라고 부릅니다.

데이터를 가만 살펴보니, 3개의 객체를 담은 배열 형태로 되어 있습니다. 배열이니 반복문을 이용하면 편리할 것 같습니다.

데이터 바인딩 하기


앞 이전 포스팅에서 수차례 다뤄봤던, document.querySelectorAll을 이용해서 데이터 바인딩을 하기 위한 코드를 작성해 보았습니다. querySelector를 사용하게 되면, 딱 1개만 선택을 해주게 되니 querySelectorAll을 써야겠죠?

<script>
for(let i=0 ; i < girls.length ; i++){
    document.querySelectorAll(".card-body h5")[i].innerHTML = girls[i].name;
    document.querySelectorAll(".card-body p")[i].innerHTML = '키: ' + girls[i].tall;
    document.querySelectorAll(".card img")[i].setAttribute('src', girls[i].photo)
}
</script>


전체 완성된 코드를 브라우저에서 실행해 보면, 각각의 카드 내용에 맞게 데이터가 잘 바인딩된 것을 확인할 수 있습니다.

각각의-카드-내용에-맞게-데이터가-잘-바인딩된-것을-확인할-수-있습니다
각각의 카드 내용에 맞게 데이터가 잘 바인딩된 것을 확인할 수 있습니다


마치며


CSR과 SSR 두 가지 렌더링 방식의 장단점을 정리해 보았고, 서버로부터 받아 온 데이터를 클라이언트 사이드에서 바인딩하는 렌더링 과정을 간단한 예제를 통해 살펴보았습니다.

실제로 서버와의 통신에서도 비슷한 과정으로 진행이 됩니다. 서버와의 통신을 너무 어렵게 생각하지 마시고, 결국은 웹문서 템플릿과 데이터들을 주고받으면서 화면을 렌더링 하게 되는데, 서버에서 완성해 주면 서버 사이드 렌더링이고, 클라이언트에서 조립 및 완성을 하게 되면 클라이언트 사이드 렌더링 방식이 되는 것입니다.

오늘도 즐거운 코딩 하세요.

즐거운 코딩생활, 즐코딩.
KINcoding.

반응형
저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

JavaScript의 배열(Array) 및 객체(Object) 기초 정리  (0) 2023.02.17
selectbox를 JS로 컨트롤 해보기 - input, change 이벤트  (0) 2023.02.16
float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현  (0) 2023.02.13
페이지 스크롤 진행률을 표시해보자 - 상단 progress-bar 만들기  (0) 2023.02.11
마우스 wheel 동작 이벤트 및 감지 - Part 2 : scrollTop, scrollHeight, clientHeight  (0) 2023.02.10

관련글

댓글

티스토리툴바