[PART1] 웹/디자인 - TERMS 10

[ TERMS 10 ]  CSR / SSR

SSR과 CSR의 차이점을 설명하는 이미지(출처 : https://blog.stackademic.com/demystifying-react-client-side-rendering-csr-vs-server-side-rendering-ssr-734633da356d)

1. CSR(Client Side Rendering) / SSR(Server Side Rendering)의 정의

 웹 페이지의 렌더링 방식은 렌더링 과정을 수행하는 위치에 따라 CSR(클라이언트 사이트 렌더링)과 SSR(서버 사이드 렌더링)로 나뉜다.

 

2. CSR / SSR 은 어떻게 접하게 될까?

 웹 개발자는 웹 앱 개발에 앞서 제공하는 웹 앱의 특성에 적합한 렌더링 방식을 선택해야 한다. 때로는 하나의 앱 내에서도 특정 페이지는 CSR 방식으로, 또 다른 특정 페이지는 SSR로 제공된다.

 

3. CSR / SSR 알아보기

> 렌더링이란?

 웹 페이지는 HTML, CSS, 자바스크립트와 그 외 여러 파일로 이루어져 있다. 이 파일들은 웹 페이지에 그리기 위해 렌더링 엔진을 거쳐서 웹 페이지 화면으로 그려진다. 즉 렌더링은 웹 페이지를 구성하는 HTML, CSS, 자바스크립트 등의 파일을 브라우저 상에 그려주는 것을 의미한다.

 

> CSR

• 개념
  

 CSR은 클라이언트 단에서 렌더링을 수행하는 것을 의미한다. 사용자가 최초로 웹 사이트에 접근할 때 웹 사이트에서 제공하는 모든 페이지에 대한 HTML, CSS등의 리소스를 클라이언트에 다운로드하고 클라이언트 사이드에서 페이지 전환을 처리한다. 서버는 맨처음 그려질 때 웹 리소스 파일을 제공하는 역할과 페이지 로딩 이후 클라이언트 측에서 요청한 데이터를 전송해주는 역할만 수행한다.

 

CSR을 설명해주는 이미지 (출처 : https://prismic.io/blog/client-side-vs-server-side-rendering)

• 동작방식

 사용자가 페이지를 요청 → 서버에서 해당 페이지의 HTML(정보가 거의 담겨져 있지 않음) 전송 → HTML 파일을 클라이언트 단에서 동적으로 구성  → 화면에 필요한 추가적인 데이터들(CSS, 여러 데이터)을 서버에서 다시 다운 → 필요한 모든 파일 다운로드시 다운받은 데이터를 이용해 클라이언트 단에서 동적으로 HTML 생성 → 사용자에게 완성된 HTML 파일이 보여짐

 이후 사용자의 클릭 등으로 웹 페이지에 변경 사항이 생기더라도 서버에 새로운 HTML 파일을 요청하지 않고 클라이언트에서 웹 페이지 렌더링을 수행함

 

> SSR

• 개념

SSR은 서버에서 렌더링 과정을 수행하는 것을 의미한다. 사용자가 웹 페이지에 접속하면 서버로 해당 페이지에 대한 요청이 이루어지고, 서버에서 필요한 HTML, CSS등을 이용해서 페이지를 렌더링한 후 클라이언트로 반환한다.

 

SSR을 설명해주는 이미지 (출처 : https://prismic.io/blog/client-side-vs-server-side-rendering)

 

• 동작방식

 사용자가 페이지를 요청 → 서버로부터 완전한 HTML 파일을 다운받아서 화면에 페이지를 띄워줌 → 웹 페이지를 동적으로 제어하기 위한 자바스크립트 파일을 서버로부터 다운 →웹 페이지를 동적으로 제어 →  페이지에 변경 사항이 있거나 새로운 페이지 요청이 생길때마다 서버에 요청 

 CSR 방식은 필요한 파일을 제공해서 클라이언트 단에서 HTML을 동적으로 구성했으나, SSR 방식은 완전한 HTML 파일을 만들어 제공한다.

 

4. CSR / SSR 을 알아야 하는 이유

렌더링의  방식에 따라 웹페이지의 성능이 크게 달라진다. 만들고자 하는 프로그램에 적합한 렌더링 방식을 선택해야한다.

 

5. CSR / SSR 비교하기

> CSR의 장점

 CSR 방식은 웹 페이지가 처음 로딩될 때만 서버에서 HTML, 자바스크립트 등의 파일을 받아오고 이후에는 서버를 거치지 않고 클라이언트 단에서 동적으로 렌더링을 한다. 따라서 초기 로딩을 제외하고는 렌더링 속도가 빠른 장점이 존재한다. 또한 사용자의 동작으로 페이지상에 변화가 생기더라도 서버에 요청을 보내지 않기에 성능 면에서 장점이 있다. 페이지가 빠르게 렌더링 되기에 사용자에게 ㅃ른 사용자 경험(UX)을 제공한다.

 

> CSR의 단점

 CSR 방식은 처음으로 화면이 그려질때 모든 파일이 전부 로딩이 완료되어야 페이지가 브라우저에 그려지기 때문에 화면 로딩 속도가 느리다는 단점이 있다. 뿐만 아니라 비어있는 HTML을 서버에서 받아온 뒤 동적으로 HTML을 구성하기 때문에 HTML 자체가 거의 비어 있어 SEO에 어려움이 있다.

 

> SSR의 장점

 SSR 방식은 일단 웹 페이지를 띄운 후 서버에 자바크스립트 파일을 요청하기 때문에 CSR방식에 비해 첫 화면 로딩 속도가 빠르다. 또한 서버측에서 완전한 HTML 파일을 만들어 주기에 SEO(검색 엔진 최적화)가 가능하다.

 

> SSR의 단점

 SSR 방식은 화면에 변화가 생길 때마다 서버에 새로운 페이지의 HTML 파일을 요청하고 그 파일을 받아와 화면을 그리기에 화면 전환 시 화면 깜빡임(Blinking)문제가 있다. 뿐만 아니라 화면 전환이 있을 때마다 서버에 요청을 보내 서버에 과부하가 오기 쉽다. 또한 서버에서 자바스크립트 파일 다운로드가 완료되지 않은 경우 화면을 클릭해도 반응하지 않는 문제가 생길 수 있다.

 

구분	CSR	SSR
정의	- 클라이언트 사이드 렌더링	- 서버 사이드 렌더링
장점	- 렌더링 속도 빠름(초기 로딩 제외) - 서버 부담 ↓	- 첫 페이지 로딩이 빠름 - SEO에 적합
단점	- 첫 페이지 로딩이 느림 - SEO가 어려움	- 화면 전환 시 깜빡임 문제 - 서버 부담 ↑ - 클릭해도 페이지가 반응하지 않는 문제

 

> 어떤 렌더링 방식을 선택해야 할까?

 CSR은 페이지 초기 로딩 속도가 느리지만 서버에 부담이 적으며, 화면 구성이 완료되는 시점과 화면을 동적으로 제어할 수 있는 시점이 같다는 특징이 있다. SSR은 페이지 초기 로딩 속도가 빠르고 SEO에 적합하지만 상대적으로 서버 부담이 크고, 화면 전환시 화면 깜빡임 문제가 발생할 수 있으며 화면 구성이 완료되는 시점과 화면을 동적으로 제어할 수 있는 시점이 다른 특징이 있다. 장단점이 분명하기에 만들고자 하는 웹 사이트의 특성을 고려하여 렌더링 방식을 선택하는 것이 중요하다.

 

 만들고자 하는 웹 사이트에 정적인 페이지가 많거나 SEO가 필수적이라면 SSR 방식을 택하는 것이 적합하다. 만들고자 하는 웹 페이지가 동적이거나 SEO가 필요하지 않은 폐쇄적인 사이트라면 CSR 방식을 선택하는 것이 적합하다.

 

실제 개발시 CSR, SSR중 하나의 렌더링 방식을 고집하여 개발할 필요는 없다. 예를 들어 첫 화면처럼 빠른 초기 로딩 속도를 필요로 하는 페이지는 SSR 방식을 선택해 개발하고, 이후 사용자의 클릭에 따라 이동하는 페이지는 CSR 방식으로 개발해 페이지 이동 시 렌더링 속도를 빠르게 함으로써 두 방식의 단점을 보완할 수 있다.

 

6. CSR / SSR 더 알아보기

> 함께 알아 두면 좋은 용어

• SEO
• SPA
• TTI
• TTV

 

> 혼동하기 쉬운 용어

• SSG