ssr 몰랐지만 알게 됐습니다

html이 렌더링 되는 과정

렌더링(Rendering)은 원시 데이터(코드, 데이터베이스 정보 등)를 가공하여 화면에 출력하는 과정을 의미합니다.

SSR의 요청 흐름

[사용자]  
   ↓ (1. HTTP 요청)
[클라이언트 (브라우저)]  
   ↓ (2. 요청 전달)
[서버]  
   ↓ (3. HTML 렌더링)  
[데이터베이스]  
   ↓ (4. 데이터 조회 후 서버에서 HTML 생성)  
[서버]  
   ↓ (5. 완성된 HTML 응답)  
[클라이언트 (브라우저)]  
   ↓ (6. 페이지 표시)  

서버 사이드 렌더링(SSR)

서버에서 HTML을 미리 생성하여 클라이언트(브라우저)로 전송. 클라이언트는 받은 HTML을 바로 표시.

📌 SSR의 흐름

사용자 → 요청 → 서버에서 HTML 생성 → 클라이언트로 응답 → 화면 표시

📌 SSR의 장점
✅ 초기 로딩 속도가 빠름
✅ 검색 엔진 최적화(SEO) 좋음
✅ 저사양 기기에서도 원활하게 실행됨

📌 SSR의 단점
🚫 매 요청마다 서버에서 HTML을 생성해야 함
🚫 서버 부하가 커질 수 있음

🔹 클라이언트 사이드 렌더링(CSR)

• 서버에서 빈 HTML을 전송하고, 클라이언트(브라우저)에서 JavaScript가 HTML을 완성.
• SPA(Single Page Application, 단일 페이지 앱) 에서 많이 사용됨 (React, Vue, Angular 등).

📌 CSR의 흐름

사용자 → 요청 → 빈 HTML 응답 → JavaScript가 데이터 로드 후 HTML 생성 → 화면 표시

📌 CSR의 장점
✅ 첫 로딩 이후 속도가 빠름
✅ 서버 부하 감소

📌 CSR의 단점
🚫 초기 로딩 속도가 느림 (JavaScript가 실행될 때까지 빈 화면)
🚫 SEO에 불리함 (크롤러가 빈 HTML만 읽음)

---

3. SSR vs CSR 비교

렌더링 방식	장점	단점	사용 사례
SSR (서버 사이드 렌더링)	초기 로딩 빠름, SEO 최적화	서버 부하 증가	블로그, 뉴스 사이트
CSR (클라이언트 사이드 렌더링)	이후 속도 빠름, 서버 부담 적음	초기 로딩 느림, SEO 불리	React/Vue 앱

---

4. 정리

• 렌더링(Rendering) = 데이터를 화면에 출력하는 과정.
• SSR(Server-Side Rendering) = 서버에서 HTML 생성 후 전송 → 빠른 초기 로딩.
• CSR(Client-Side Rendering) = 클라이언트에서 JavaScript로 HTML 생성 → 인터랙티브한 앱에서 유리.

---