728x90
반응형
CSR(클라이언트사이드 렌더링)이 처음에는 좀 헷갈릴 수 있어요. 특히 "서버가 웹페이지를 제공하면 브라우저는 그냥 보여주기만 하는 거 아니야?"라는 생각은 SSR(서버사이드 렌더링)과 비교하면 자연스러운 의문이에요. CSR이 뭔지, 왜 클라이언트에서 렌더링을 하는지 쉽게 풀어서 설명해볼게요.
CSR을 쉽게 이해하기
일반적인 생각(SSR 기반):
- 사용자가 브라우저에서 "example.com"을 요청하면, 서버가 완성된 HTML(예: <h1>안녕하세요</h1><p>이건 콘텐츠예요</p>)을 보내주고, 브라우저는 그걸 받아서 화면에 띄워주는 방식.
CSR은 다르게 동작해요:
- 서버는 완성된 웹페이지를 주지 않고, 최소한의 HTML(거의 빈 껍데기)과 JavaScript 파일만 줍니다.
- 그러면 브라우저가 그 JavaScript를 실행해서 필요한 데이터를 가져오고, 직접 HTML을 만들어서 화면에 띄웁니다.
- 즉, 렌더링(화면에 보여줄 콘텐츠를 만드는 작업)이 서버가 아니라 브라우저(클라이언트)에서 일어나는 거예요.
CSR 작동 방식, 단계별로
- 사용자가 요청: 브라우저에서 "example.com"을 입력.
- 서버 응답: 서버가 아주 간단한 HTML을 보냄. 예를 들어:
<html><body><div id="root"></div> <!-- 여긴 처음엔 비어있음 --><script src="app.js"></script> <!-- JS 파일 링크 --></body></html>
- 이 HTML은 콘텐츠가 거의 없어요. <div id="root">는 빈 공간일 뿐.
- 브라우저가 JS 실행: 브라우저가 app.js를 다운로드하고 실행.
- JS가 데이터 요청: app.js 안에 코드가 있어요. 예를 들어:
fetch('/api/data') // 서버에 데이터 요청.then(response => response.json()).then(data => { document.getElementById('root').innerHTML = `<h1>${data.title}</h1><p>${data.content}</p>`; });
- 이 코드가 서버에 "데이터 좀 줘!"라고 요청하고, 받은 데이터를 기반으로 HTML을 만듦.
- 브라우저에 표시: <div id="root"> 안에 <h1>이나 <p> 같은 콘텐츠가 채워져서 화면에 나타남.
비유로 이해하기
- SSR: 레스토랑에서 완성된 음식(HTML)을 주문하면, 웨이터(서버)가 요리사(WAS)가 만든 음식을 바로 가져다줘서 먹기만 하면 됨.
- CSR: 레스토랑에서 재료(최소 HTML + JS)와 레시피(app.js)를 주면, 내가 직접 집에서 요리(렌더링)를 해서 먹는 느낌. 서버는 재료만 주고, 실제 음식 만드는 건 나(브라우저)가 함.
왜 클라이언트에서 렌더링해?
- 빠른 상호작용: CSR은 한 번 JS를 받아놓으면, 페이지 이동이나 버튼 클릭 같은 동작을 서버에 매번 요청하지 않고 브라우저에서 바로 처리할 수 있어요. 예: React나 Vue로 만든 SPA(Single Page Application)는 새로고침 없이 부드럽게 동작.
- 서버 부하 줄이기: 서버는 단순히 데이터만 주면 되니까(예: JSON 형식), 복잡한 HTML 만드는 일을 브라우저에 맡김.
- 현대 웹 트렌드: 요즘 웹은 앱처럼 동적이고 인터랙티브한 경우가 많아서, CSR이 적합한 경우가 많음.
혼동 풀기: "서버가 웹페이지 제공"과의 차이
- "서버가 웹페이지를 제공하고 브라우저가 보여주기만 한다"는 SSR 방식이에요. 서버가 완성된 HTML을 다 만들어서 주는 거죠.
- CSR에서는 서버가 "완성된 웹페이지"를 주지 않고, 웹페이지를 만들 재료와 도구(HTML + JS)를 주고, 브라우저가 그걸로 직접 웹페이지를 만듦. 그래서 "클라이언트에서 렌더링"이라고 하는 거예요.
간단 예시
CSR 기반 웹사이트(예: React로 만든 사이트)에 접속하면:
- 처음엔 빈 화면이 잠깐 보일 수 있음(JS 다운로드 대기 중).
- JS가 실행되면서 데이터 가져와서 화면이 채워짐.
- 그 뒤로는 클릭하거나 이동할 때 서버 요청 없이 빠르게 반응.
반면 SSR 사이트(예: 전통적인 PHP 사이트)는 처음부터 콘텐츠가 꽉 찬 HTML을 받음.
728x90
반응형
'IT공부' 카테고리의 다른 글
| [지식루프 IT공부] 객체(Object)란 무엇인가? (0) | 2025.04.02 |
|---|---|
| [지식루프 IT공부] HTML속성과 DOM 프로퍼티 차이 (1) | 2025.03.25 |
| [지식루프 IT공부] .remove, .prepend, .append, .before, .after 를 이용한 노드 삭제, 이동방법 (0) | 2025.03.25 |
| [지식루프 IT공부] prepend, append, before, after의 차이 (0) | 2025.03.25 |
| 맥북 화면분할 단축키 (0) | 2025.03.25 |