[CS] CSR과 SSR

목차

1. CSR (Client Side Rendering)
2. SSR (Server Side Rendering)
3. CSR vs SSR

 

 

---

 

 

CSR (Client Side Rendering)

CSR 정의 :

비어있는 HTML을 브라우저가 자바스크립트를 실행해서 UI를 만들고 데이터를 가져와서 화면을 구성하는 방식입니다.

(브라우저가 랜더링을 합니다.)

 

 

CSR 작동 방식 :

 

1. 요청 : 클라이언트가 HTML을 요청 → 응답 : 서버는 비어있는 HTML과 JS가 존재하는 주소 링크를 응답

2. 요청 : 클라이언트가 JS(클라이언트 로직, 렌더링 포함)를 요청 → 응답 : 서버는 JS를 응답

3. 요청 : 클라이언트가 HTTP API 요청 (예: `/api/products`) → 응답 : 서버는 DB에서 데이터를 가져와, JSON 형태로 응답

{
    "name": "김철수",
    "job": "developer"
}

✅ 응답받은 JSON 형태로 HTML을 동적으로 그립니다.

 

 

CSR 장단점 :

• 장점
  1. 동적 웹앱 : 클라이언트 측에서 렌더링하므로 사용자 상호작용에 빠르게 반응할 수 있습니다.
  2. 빠른 페이지 전환 : 초기 로딩 후에는 서버와의 통신 없이 빠르게 페이지 간 전환이 가능합니다.
  3. 서버 부하 낮음 : 초기 요청만 처리하기 때문에 서버 부하가 낮습니다.
• 단점
  1. 초기 로딩 느림 : 초기 로딩 시 필요한 모든 자바스크립트 파일을 다운로드하고 실행해야 하므로, 초기 로딩 시간이 깁니다.
  2. SEO 어려움 : 검색 엔진 크롤러가 자바스크립트를 제대로 실행하지 못하면 `SEO`에 불리할 수 있습니다.
  3. 페이지 깨짐 : JS 오류 시 전체 페이지가 깨질 수 있습니다.

👍동적 웹앱이란 다음과 같은 특징을 갖는 인터렉티브한 앱을 의미합니다.

• 사용자 입력에 따라 동작이 즉각적으로 바뀝니다. (검색, 좋아요, 댓글 등)
• 브라우저 안에서 JS가 UI를 직접 조작합니다.
• 페이지 새로고침 없이 데이터를 가져오고 갱신합니다. (Ajax, Fetch, Axios 등)

 

 

---

 

 

SSR (Server Side Rendering)

SSR 정의 :

웹 페이지를 서버에서 HTML 형태로 미리 렌더링한 후 클라이언트(브라우저)로 전달하는 방식입니다.
(브라우저가 실행하기 전에 서버에서 HTML 형태로 페이지 구조를 만들어 놓고 전달합니다.)

 

 

SSR 작동 방식 :

 

1. 사용자가 웹사이트에 접속하면 브라우저가 서버에 요청을 보냅니다.

2. 서버에서 로직을 거친 후, DB를 조회합니다.

3. 조회 결과를 기반으로 서버는 HTML을 동적으로 생성한 후, 클라이언트에 전달합니다.

4. 브라우저는 이 HTML을 바로 보여줍니다.

 

✨ 왜 동적 생성일까?

• 사용자가 접근할 때마다 서버가 DB에서 값을 가져오고, 내용은 상황에 따라 달라질 수 있습니다.
• DB에서 HTML을 수정하면, 페이지를 재배포하지 않아도 실시간으로 내용이 변경됩니다. (정적 HTML 파일과의 차이)

 

❗동적 생성이면, 동적 웹앱인가?

👍동적 웹앱이란 다음과 같은 특징을 갖는 인터렉티브한 앱을 의미합니다.

• 사용자 입력에 따라 동작이 즉각적으로 바뀝니다. (검색, 좋아요, 댓글 등)
• 브라우저 안에서 JS가 UI를 직접 조작합니다.
• 페이지 새로고침 없이 데이터를 가져오고 갱신합니다. (Ajax, Fetch, Axios 등)

• 방식은 HTML 자체는 동적일 수 있지만,
• 클라이언트에서 자바스크립트로 사용자 입력을 처리하거나 API 요청을 보내는 진짜 동적 상호작용은 아닙니다.
• 즉, 서버에서 HTML을 동적으로 불러와서 보여줄 수는 있지만, 그것만으로는 완전히 동적인 웹앱이 되지는 않습니다.

 

 

 

SSR 장단점 :

• 장점
  1. 빠른 초기 로딩 속도 : 초기 페이지 로드 시 서버에서 완전히 렌더링된 HTML을 반환하여 첫 페이지 로딩이 빠릅니다.
  2. SEO에 유리 : 검색 엔진 크롤러가 완전한 HTML을 즉시 수집할 수 있어 `SEO`에 유리합니다.
     (`SEO(Search Engine Optimization)`)
• 단점
  1. 서버 부하 증가 : 모든 요청마다 HTML을 서버에서 렌더링해야 하므로 비용 증가합니다.
  2. 랜더링 속도 : 초기 페에지 이외의 페이지들도 렌더링 후 반환되기 때문에 속도가 느립니다.

 

---

 

 

CSR vs SSR

항목	CSR(클라이언트)	SSR(서버)
렌더링 위치	브라우저 안	서버
초기 HTML	거의 없음	내용이 포함된 HTML
초기 속도	느림	빠름
SEO	불리함	유리함
상호작용	매우 풍부	보통 적음