[Web] SSR과 CSR

 

 

SSR과 CSR은 웹 애플리케이션의 프론트엔드 렌더링 방식을 설명하는 용어이다.

 

 📌 렌더링

웹 개발에서 렌더링은 서버가 생성한 데이터를 클라이언트 (웹 브라우저)에게 전달하여

해당 데이터를 가지고 웹 페이지를 생성하고 보여주는 것을 의미

 

웹 페이지를 사용자가 볼 수 있는 형태로 변환하는 과정을 말함

 

일반적으로 렌더링은 다음과 같은 흐름으로 전달된다.

 

1. SSR or CSR

 먼저 웹 페이지의 HTML, CSS, JavaScript 등의 코드가 서버에서 생성될지, 클라이언트에서 동적으로 생성될지 결정됨

이를 SSR 또는 CSR 방식으로 구현

 

2.  HTML 생성

SSR / CSR에 따라 HTML 생성 (아래 설명)

 

3. CSS와 Javascript 적용

생성된 HTML 문서에는 CSS와 JavaScript 등의 코드가 포함되어 있음

CSS는 웹 페이지의 스타일과 레이아웃을 정의

JavaScript는 웹 페이지의 동작과 상호작용을 담당

 

4. 웹 브라우저에서 렌더링

생성된 HTML, CSS, JavaScript 코드는 사용자의 웹 브라우저에 의해 해석되고 렌더링됨

웹 브라우저는 HTML 문서를 파싱하여 DOM (Document Object Model) 트리를 구성하고,

CSS를 적용하여 레이아웃을 결정하고, JavaScript를 실행하여 웹 페이지를 동적으로 만들어 냄

 

5. 사용자에게 시각적으로 보여주기

최종적으로 웹 브라우저에 의해 렌더링된 결과물이 사용자에게 시각적으로 보여짐

사용자는 이를 통해 웹 페이지를 이용하고 상호작용할 수 있음

 

---

💡 SSR (Server-Side-Rendering)

1. 클라이언트 (브라우저)가 서버에 페이지 요청을 보냄

 

2. 서버는 요청을 받아 해당 페이지에 필요한 데이터를 데이터베이스 등으로부터 가져와서 
HTML 템플릿에 데이터를 적용하여 렌더링함

 

3. 서버는 렌더링된 HTML을 클라이언트에게 전달함

 

4. 클라이언트는 받은 HTML을 브라우저에 렌더링하여 사용자에게 보여줌

 

 

SSR은 서버 측에서 웹 페이지의 뷰를 구성하고 렌더링하여 클라이언트에게 전달하는 방식

서버에서 데이터와 뷰를 조합하여 클라이언트에게 전달하기 때문에
초기 로딩속도가 빠르고 SEO(Search Engine Optimization)에 유리

 

장점

검색 엔진 최적화가 용이하므로 SEO에 유리함

초기 로딩 속도가 빠르고 사용자에게 빠른 콘텐츠 표시가 가능함

단점

서버 측에서 뷰를 렌더링하므로 서버 부하가 커질 수 있음

전체 페이지가 매번 새로고침되므로 사용자 경험에 제약이 있을 수 있음

 

---

💡 CSR (Client-Side-Rendering)

1. 클라이언트 (브라우저)가 서버에 페이지 요청을 보냄

 

2. 서버는 클라이언트에게 필요한 HTML과 빈 페이지를 전달함

 

3. 클라이언트는 받은 HTML을 렌더링하고, 필요한 데이터를 AJAX 요청 등으로 서버에 다시 요청함

 

4. 서버는 요청을 받아 데이터를 JSON 형태로 클라이언트에게 저달함

 

5. 클라이언트는 받은 데이터를 이용하여 페이지를 동적으로 렌더링함

 

 

CSR은 서버로부터 빈 페이지를 받은 뒤, 클라이언트 측에서 JavaScript를 사용하여 데이터를 받고 렌더링하는 방식

클라이언트 측에서 뷰를 조합하므로 서버 부하가 줄어들지만 초기 로딩 속도가 느리고 SEO에 취약함

 

장점

서버 부하가 감소하므로 대규모 애플리케이션에 적합

빠른 사용자 경험을 제공할 수 있음

단점

초기 로딩 속도가 느릴 수 있고, 초기 페이지 렌더링에 빈 페이지가 나타날 수 있음

검색 엔진 최적화에 취약하며, SEO를 위한 추가적인 작업이 필요