📌 면접 답변
SSR(Sever Side Rendering)
- 서버는 CSS까지 모두 적용하여 렌더링 준비를 마치고 HTML과 JS 코드 응답
- 모든 데이터가 이미 HTML 담긴 채로 브라우저에 전달
- 때문에 SEO에 유리
- 사용자는 JS 코드 다운 전에 이미 렌더링 된 HTML 볼 수 있어 초기 구동 속도 빠름
코드 예시
/ssr-example
├── server.js
├── views
├── index.ejs// server.js
const express = require("express");
const app = express();
app.set("view engine", "ejs"); // EJS 템플릿 엔진 설정
app.get("/", (req, res) => {
res.render("index", { message: "서버에서 미리 생성한 HTML" });
});
app.listen(3000, () => console.log("서버 실행 중: http://localhost:3000"));
<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SSR Example</title>
</head>
<body>
<h1><%= message %></h1> <!-- 서버에서 미리 HTML을 생성 -->
</body>
</html>
- SSR에서는 서버가 HTML을 미리 생성해서 브라우저에 보냄
- 브라우저는 받은 HTML을 바로 렌더링 할 수 있음 (JS 실행 없이 화면 보임)
- 추가적인 기능을 위해 브라우저에서 JS 실행 될 수도 있음
CSR(Client Side Rendering)
- 클라이언트가 서버에 컨텐츠 요청하면, 서버는 빈 뼈대의 HTML (index.html) 응답
- 이후 브라우저는 JS를 실행하여 HTML을 동적으로 생성
- 동적으로 DOM을 생성하는 시간을 기다려야 하기 떄문에 초기 로딩 속도 느림
- 로딩 이후 페이지 일부 변경할 때, 서버에 해당 데이터만 요청하면 되기 때문에 구동 속도 빠름
- 서버 측의 부하가 적고, 클라이언트 측에서 연산과 라우팅 등을 직접 처리
- 사용자 인터랙션이 많은 웹앱(Notion, Trello 등)에서는 CSR이 효율적
코드 예시
/csr-example
├── index.html
├── app.js<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSR Example</title>
</head>
<body>
<div id="root"></div> <!-- 처음에는 비어 있음 -->
<script src="app.js"></script> <!-- JavaScript 실행 후 HTML 생성 -->
</body>
</html>// app.js
document.addEventListener("DOMContentLoaded", () => {
const root = document.getElementById("root");
// 서버에서 데이터를 가져온다고 가정 (여기서는 setTimeout으로 흉내냄)
setTimeout(() => {
root.innerHTML = "<h1>CSR 방식으로 JavaScript가 HTML을 생성</h1>";
}, 1000); // 1초 후에 데이터를 받아온 것처럼 HTML 생성
});- 브라우저가 서버에서 빈 HTML과 JS 파일을 받음
- 브라우저가 받은 JS가 실행되면서 HTML을 동적으로 생성
- 브라우저가 동적으로 생성된 HTML을 렌더링
HTML을 생성하는 주체가 브라우저의 JS이면 CSR
HTML을 생성하는 주체가 서버이면 SSR
📌 내 답변
서버 사이드 렌더링은 서버에서 요청에 대한 응답을 렌더링하여 클라이언트에게 보내는 것이고,
클라이언트 사이드 렌더링은 서버가 아니라 클라이언트가 요청을 렌더링하는 방식이다.
→ 설명이 좀 부족했다. 클라이언트와 서버가 뭐를 렌더링하는지 ? 또는 장단점이 무엇인지
📌 추가 내용
SPA (Single Page Application)
- 하나의 페이지로 구성된 웹 애플리케이션
- 클릭한 부분만 바뀌는 방식
MPA (Multi Page Application)
- 탭을 이동할 때마다 서버로부터 새로운 HTML을 받아옴
- 페이지 전체를 렌더링하는 방식
매일메일 - 기술 면접 질문 구독 서비스
기술 면접 질문을 매일매일 메일로 보내드릴게요!
www.maeil-mail.kr
매일 메일의 면접 질문 정리
'😀 Jerry > 면접 질문' 카테고리의 다른 글
| [1분 면접] HTTPS란 무엇인가 ? (0) | 2025.03.06 |
|---|---|
| [1분 면접] WAS와 웹 서버의 차이점 (0) | 2025.03.05 |
| [1분 면접] (Connection, Socket, Read) Timeout 차이점 (0) | 2025.02.28 |
| [1분 면접] 얕은 복사와 깊은 복사의 차이 (0) | 2025.02.27 |
| [1분 면접] 포워드 프록시와 리버스 프록시의 차이점 (0) | 2025.02.26 |