VOCA/Web
SSR과 CSR
by BAYABA
2021. 9. 30.
- 개인 공부 목적으로 작성한 글입니다.
- 아래 출처를 참고하여 작성하였습니다.
- 계속 업데이트 할 예정입니다.
목차
- SSR (Server Side Rendering)
- CSR(Client Side Rendering)의 시초
- CSR (Client Side Rendering)
- Ajax 동작 가능 여부
1. SSR (Server Side Rendering)
- SSR이란 서버에서 클라이언트에게 랜더링이 전부 다 된 HTML 데이터(파일)를 보내주는 것을 의미합니다.
- e.g. 유저가 브라우저에서 www.google.com 요청을 하면 구글 서버는 응답을 하고, 사용자는 구글 화면을 보게 됩니다.
- 그러나 이건 브라우저가 랜더링을 해줄 뿐, 실제로 서버에서 받아오는 데이터는 HTML 파일을 받아옵니다.
- 브라우저는 서버로부터 받은 HTML 파일을 분석해서 화면을 보여줄 뿐입니다.
2. CSR(Client Side Rendering)의 시초
- CSR이 뭔지를 살펴보기 전에, CSR의 시초라고 하면 jQuery Table이라는 개념이 있습니다.
- jQuery Table은 클라이언트에서 API 요청을 하면 서버에서 json으로 데이터를 보내주고, 이걸 jQuery가 테이블 화면으로 만들어서 보여주는 기술입니다.
- 이게 흥미로운 건, 서버에서 보내주는 건 json 데이터입니다. HTML 데이터를 만들어서 보내주지 않습니다.
- 즉, Client 컴퓨터에서 서버로부터 받은 데이터를 직접 랜더링하는 것입니다.
- 이게 CSR의 시초라고 할 수 있습니다.
3. CSR (Client Side Rendering)
- CSR은 위의 'CSR의 시초'에서 말했던 '랜더링'이라는 개념을 "json 데이터에 대해서만 하지 말고, 웹 페이지 전체를 다 랜더링 해버리면 어떨까?"라는 생각에서 출발합니다.
<!-- CSR "Single Page" base code -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root">
<app></app>
</div>
<script src="https://vuejs.org" type="text/javascript"></script>
<script src="location/of/app.js" type="text/javascript"></script>
</body>
</html>
- CSR 방식이란 위와 같이 비어있는 html 파일을 서버로부터 받아온 후 자바스크립트 코드가 로딩이 되면, div id = root를 포인팅 해서, root를 기반으로 모든 컴포넌트를 자바스크립트 기반으로 해서 랜더링을 해버립니다.
- 유저가 실제로 보고 있는 건 아무것도 들어있지 않은 싱글 페이지지만 자바스크립트가 버츄얼 돔을 랜더링하면서, 유저 입장에서 여러 페이지를 네비게이션 하고 있는 것 같은 착각을 줍니다.
- 즉, 자바스크립트 코드가 싱글 페이지 안에 있는 화면을 랜더링합니다.
- 이건 당연히 클라이언트 사이드에서 이뤄지는 작업입니다. 왜냐면 서버에서 받아오는 건 위 경로에 있는 자바스크립트 파일을 로딩하라는 코드밖에 없습니다. 서버에서 HTML 파일을 받아서 랜더링 해주는 게 아닙니다.
- 클라이언트 사이드에서 위의 자바스크립트 코드를 받아서, 자바스크립트 코드가 동작을 하면서 화면(싱글 페이지) 안에다가 랜더링을 해주는 것입니다.
4. Ajax 동작 가능 여부
- 어떤 방식으로 페이지를 그리던 간에 Ajax 통신은 가능합니다.
- 그 이유는 SSR이든, CSR이든 랜더링이 끝난 시점에 자바스크립트 코드가 로딩이 되어있기 때문에 DOM 조작이 가능하기 때문입니다.
출처
- Client Side Rendering vs Server Side Rendering 모르면 일단 누르세요~