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

728x90

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

클라이언트(브라우저) 가 렌더링을 처리 하는 방식이다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 모든 처리를 하게 된다.

사용자들의 PC성능의 향상으로 많은 처리 동작 들이 무리 없이 수행 할 수 있게 되며, 자바스크립트의 표준화가 잘 되어짐에 따라 React, Vue와 같은 CSR 프레임워크 라이브러리들이 나타나게 된다.

사이트에 접속 한다.
서버에서 index 파일을 받아온다 ( HTML 파일이 아무것도 없기 때문에, 빈 화면 )
html 파일에 링크되어 있는 모든 로직이 담겨있는 js 파일을 클라이언트로 요청한다.
받아온 js 파일로 인해 동적으로 html 사용자에게 보여지고 클릭 할 수 있게 된다.

CSR은 사용자가 웹사이트를 볼 수 있음 ( TTV ) 과 동시에 클릭을 하거나 인터랙션 ( TTI ) 이 가능하게 된다.

[ CSR HTML 예제 ]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta
      name="description"
      content="Web site"
    />
    <title>App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>

예제를 보면 HTML 문서가 텅텅 비어있기 때문에, 처음 접속을 했을 경우 화면은 빈 화면만 보인다. 링크 된 app.js 파일을 서버에서 다운로드 받게 되는데, 해당 파일 안에는 페이지에 필요한 로직 뿐 아니라 구동하는 프레임워크나 라이브러리도 포함이 되어 있다. 해당 파일을 읽어 동적으로 html 화면을 뿌려준다.

장점

초기페이지 제외 나머지의 로드 시간이 SSR에 비해 빠르다.
View의 렌더링을 브라우저로 해서 서버 트래픽을 감소하고 사용자에게 더 빠른 인터렉션을 제공할 수 있다.
새로고침이 발생하지 않아 네이티브 앱과 비슷한 경험을 할 수있다.

단점

한 개의 파일에 압축 해 놓은 형태라 사이즈가 클 수 있어 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다.
좋지 못한 Low SEO ( 검색엔진 최적화 ) , CSR에서 사용 되는 html의 body 부분은 텅텅 빈 형태이기 때문에, 크롤링이 잘 안되는 단점이 있다.

고민해야할 부분

번들링 해서 사용자에게 보여주는 js 파일을 효율적으로 분할 해서 첫번째로 사용자가 보기 위해서 필수적인 부분만 보낼 수 있는 지에 대한 고민.

[참고자료]

드림코드엘리 [ https://www.youtube.com/watch?v=iZ9csAfU5Os ]

728x90

'STUDY > CS' 카테고리의 다른 글

하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) (0)	2022.12.28
교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) (0)	2022.12.28
서버 사이드 렌더링(SSR, Server Side Rendering) (0)	2022.12.28
검색 엔진 최적화 (SEO, Search Engine Optimization) (0)	2022.12.28
아토믹 디자인 (Atomic Design) (0)	2022.12.27

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