🖥️ CSR vs SSR: 클라이언트와 서버 어디서 페이지를 렌더링할까?

웹 개발을 하다 보면 CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)이라는 용어를 자주 마주하게 됩니다. 둘은 브라우저에 웹 페이지를 보여주는 방식이 달라, 성능과 SEO, 개발 구조에 큰 영향을 미칩니다.

---

1️⃣ CSR(Client-Side Rendering) – 클라이언트 중심

개념: 서버는 최소한의 HTML과 JavaScript만 내려주고, 브라우저가 JS를 실행하여 화면을 렌더링하는 방식입니다.

특징:

• React, Vue, Angular 같은 SPA(단일 페이지 애플리케이션)에서 주로 사용.
• 서버는 주로 API 데이터를 제공.
• 클라이언트에서 페이지를 렌더링하므로 초기 로딩은 느릴 수 있지만, 이후 페이지 전환은 빠름.
• SEO 최적화가 어렵지만, 사용자 경험(UX)은 좋음.

예시:

사용자 요청 → 서버(API) → JSON 데이터 전달
→ 브라우저에서 React가 HTML 생성 → 화면 렌더링

⚡ React 프로젝트를 별도 포트에서 띄우고 Spring Controller가 단순 API만 제공하는 경우는 CSR에 해당합니다.

---

2️⃣ SSR(Server-Side Rendering) – 서버 중심

개념: 서버에서 완전히 렌더링된 HTML을 브라우저에 전달하는 방식입니다.

특징:

• JSP, Thymeleaf, Spring 기반 SSR에서 사용.
• 초기 페이지 로딩 속도가 빠르고 SEO 친화적.
• 서버가 HTML을 만들어 브라우저에 보내므로 클라이언트는 바로 화면 확인 가능.

예시:

사용자 요청 → 서버(Spring + Thymeleaf) → 서버에서 HTML 렌더링
→ 브라우저에 전달 → 화면 표시

⚡ JSP나 Thymeleaf를 이용하면 서버에서 HTML을 렌더링한 후 브라우저에 전달하므로 SSR입니다.

---

3️⃣ CSR vs SSR 비교

항목	CSR	SSR
렌더링 위치	브라우저	서버
초기 로딩 속도	느림	빠름
페이지 전환	빠름	요청마다 서버 렌더링
SEO	불리함	유리함
예시	React SPA	JSP, Thymeleaf

---

4️⃣ 혼동되는 상황

• React 프로젝트를 Next.js 등 SSR 지원 프레임워크로 서버에서 렌더링하면 SSR 가능.
• React 프로젝트를 별도 서버에서 실행하고 Spring이 API만 제공하면 CSR.
• Tailwind CSS는 HTML 내부에서 작동하므로 CSR에서도 문제없이 동작.

---

5️⃣ 핵심 정리

• 서버에서 HTML을 렌더링 → SSR
• 클라이언트에서 JS로 HTML을 렌더링 → CSR
• 렌더링 위치와 초기 로딩 주체가 SSR과 CSR의 차이를 결정합니다.

---

---

🗒️ 추가 용어 정리

🔍 SEO (Search Engine Optimization) – 검색 엔진 최적화

SEO는 검색 엔진 최적화를 의미하며, 구글, 네이버, 빙 같은 검색 엔진에서 내 웹사이트가 더 잘 검색되도록 개선하는 작업입니다. 쉽게 말해 “검색했을 때 내 페이지가 상단에 나오도록 하는 기술”이에요.

---