CSR(Client Side Rendering)이란 ?
CSR이란, 웹사이트의 화면(HTML)을 서버가 아니라 브라우저(클라이언트)가 직접 만들어서 보여주는 방식이다.
처음에는 거의 비어 있는 HTML 틀만 받고,자바스크립트가 실행되면서 서버에 "데이터 주세요!"라고 요청하고, 받은 데이터를 브라우저가 직접 HTML로 만들어서 사용자에게 보여준다.
-
쉽게 예를들면
쇼핑몰 입구에서 빈 쇼핑백(HTML 뼈대)을 받고,
직원이 상품 창고 주소(API)를 알려줌
손님(브라우저)이 직접 창고에 가서 상품을 고르고, 쇼핑백에 채워 넣음.장점: 자기가 원하는 것만 빠르게 담을 수 있음.
단점: 처음엔 쇼핑백이 비어 있어 뭔가 없는 것처럼 느껴질 수 있음.
CSR 동작 방식
[1] 브라우저가 HTML 파일을 요청
↓
[2] 서버는 HTML 틀(빈 쇼핑백)을 응답
↓
[3] HTML 안의 자바스크립트 실행됨
↓
[4] 자바스크립트가 서버(API)에 데이터 요청
↓
[5] 서버가 JSON 데이터 응답
↓
[6] 브라우저가 받은 데이터를 HTML로 만들어 쇼핑백에 담음
↓
[7] 사용자에게 완성된 화면이 보임 (렌더링 완료!)
CSR을 사용한 HTML 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSR 예제</title> </head> <body> <!-- 여기 안에 데이터 (쇼핑백 역할) --> <div id="app">잠시만 기다려주세요...</div> <script> // 1. 실제 서버 대신, 가짜 데이터 배열을 만듭니다 const fakeData = [ { title: "사과" }, { title: "바나나" }, { title: "오렌지" }, ]; // 2. 데이터를 HTML 요소로 변환해 보여주는 함수입니다 function renderData(data) { const app = document.getElementById("app"); app.innerHTML = ""; // 기존 "잠시만 기다려주세요..." 문구를 지웁니다 data.forEach((item) => { const p = document.createElement("p"); p.textContent = item.title; app.appendChild(p); // <p>사과</p> 같은 태그를 추가합니다 }); } // 3. 마치 데이터를 기다리는 것처럼 1초 뒤에 화면을 채웁니다 setTimeout(() => { renderData(fakeData); }, 1000); </script> </body> </html>
SSR(Server Side Rendering)이란 ?
SSR이란, 웹사이트의 화면(HTML)을 브라우저가 아닌 서버에서 미리 만들어서 사용자에게 전달하는 방식이다.
서버가 미리 전체 페이지를 만들어서 브라우저에 보내주고, 브라우저는 받은 내용을 그대로 보여주기만 하면 되며, 자바스크립트 없이도 화면이 잘 보인다.
-
쉽게 예를들면
손님이 쇼핑몰에 들어오면,
직원이 필요한 상품을 골라 예쁘게 포장한 완성된 쇼핑백을 건네주고,
손님은 그 쇼핑백을 그대로 받아 열어보면 됨.
손님은 직원이 미리 다 만들어놨기 때문에 손님은 기다릴 필요가 없음.단점1: 직원이 매번 포장해야 하니 시간이 걸릴 수 있다.
단점2: 상품을 바꿔야 할 때마다 다시 쇼핑백을 포장해야 한다.
SSR 동작 방식
[1] 브라우저가 HTML 페이지를 요청
↓
[2] 서버가 데이터를 읽고 HTML을 만듦
↓
[3] 완성된 HTML 전체를 브라우저에 전달
↓
[4] 브라우저는 받은 HTML을 바로 보여줌
↓
[5] 사용자에게 바로 보이는 웹페이지 완성!
모든 화면 제작은 서버에서 완료되며, 브라우저는 그냥 받아 보여주기만 합니다.
SSR을 사용하는 Node.js 코드
const http = require("http"); // 기본 http 서버 모듈 const fs = require("fs"); // 파일 시스템 (현재는 사용 안하지만 일반적으로 함께 사용됨) // ① 간단한 HTTP 서버를 생성합니다 const server = http.createServer((req, res) => { // ② 서버 측에서 데이터를 준비합니다 // 실제로는 DB에서 데이터를 가져올 수도 있습니다 const data = [{ title: "Item 1" }, { title: "Item 2" }]; // ③ 서버가 HTML 코드를 직접 만듭니다 (데이터를 포함한 상태로!) const html = ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SSR Example</title> </head> <body> <h1>Server-Side Rendered Page</h1> ${data.map((item) => `<p>${item.title}</p>`).join("")} </body> </html> `; // ④ 만든 HTML을 클라이언트에 전송합니다 res.writeHead(200, { "Content-Type": "text/html" }); // 응답 헤더 설정 res.end(html); // HTML 전체를 브라우저로 보냅니다 }); // ⑤ 서버를 3000번 포트에서 실행합니다 server.listen(3000, () => { console.log("Server is running on http://localhost:3000"); });
SSR과 CSR 차이 정리
| 항목 | SSR(서버 렌더링) | CSR(클라이언트 렌더링) |
|---|---|---|
| HTML 생성 위치 | 서버 | 브라우저 |
| 초기 로딩 속도 | 빠름 | 느릴 수 있음 |
| 자바스크립트 없어도 동작 | 가능 | 불가능 |
| 새로고침 없이 화면 변경 | 어려움 | 쉬움 |
| 검색엔진 최적화(SEO) | 좋음 | 어려울 수 있음 |
| 대표 예시 | 뉴스, 블로그 | Gmail, 페이스북 |
출처: https://www.inflearn.com/course/expressjs-%EA%B8%B0%EC%B4%88-%EC%8B%AC%ED%99%94/dashboard
