[Web] SSR과 CSR이란?

 

개인 포트폴리오를 준비하면서 React로 만들지 HTML, CSS, JS로 만들지 고민하던 때가 있었다. 그 당시에는 React로 서비스를 구현하면 '초기 렌더링 속도가 느리다'라고 가볍게 알고 넘어갔었는데, 웹과 관련해서 일하고자 한다면 꼭 알아야하는 지식이라고 한다.

 

그래서 SSR과 CSR의 차이점과 장단점을 정리해보았다.

 

 

 

---

 

 

 

렌더링(Rendering)

렌더링이란 브라우저가 동작되어 우리에게 정보를 보여줄 때, 서버로부터 HTML 파일을 받아 화면에 뿌려주는 과정이다. 서버로부터 HTML 파일을 받으면 렌더링 엔진은 HTML 문서를 파싱해서 DOM 트리를 구성하고, CSS 파일을 파싱하여 CSSOM 트리를 만든다.

 

일반적으로 렌더링 엔진이 다루는 언어는 HTML, CSS, JavaScript이다. 이 세가지 파일을 합쳐서 우리가 보는 웹 화면을 만드는 것을 "렌더링한다"라고 한다.

이러한 렌더링을 하는 방식에는 SSR과 CSR이 있는데, 이 두가지 렌더링 방식에 대해 알아보도록 하자.

 

 

 

SPA와 MPA란?

우선 SSR과 CSR을 설명하기 전에 SPA와 MPA의 개념을 알아야 한다.

 

 

|  SPA(Single Page Application)

이름에서도 알 수 있듯이 싱글 페이지, 즉 하나의 페이지로 구성된 Application을 말한다. SPA는 최초에 한번 페이지 전체를 로드하고, 그 이후부터는 새로운 요청이 있을 때마다 Ajax를 통해 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다. 데이터를 수정하거나 조회할 때 동적으로 페이지를 구성하기 때문에 페이지가 새로고침되지 않는다.

 

SPA는 현재 웹 개발의 트랜드라고 볼 수 있고, 우리가 알고 있는 Vue, Angular, React와 같은 프레임워크가 SPA 방식을 사용한다.

 

Ajax란?
- Asynchronous JavaScript And XML의 약자
- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나
- 웹 페이지 전체를 다시 로딩하지 않고, 서버와 통신하여 웹 페이지 특정 부분만 갱신

 

 

|  MPA(Multiple Page Application)

여러 페이지로 구성된 Application이다. 새로운 페이지를 요청할 때마다 서버에서 렌더링 된 정적 리소스(HTML, CSS, JS)가 다운로드 된다. 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링하는 전통적인 웹 페이지 구성 방식이다.

 

PHP와 JAVA가 MPA 방식을 사용한다. 

 

 

 

CSR(Client Side Rendering)

클라이언트 사이드 렌더링이란 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식을 말한다. 위에서 언급한 SPA(Single Page Application)가 CSR방식을 채택하고 있다.

출처: The Benefits of Server Side Rendering Over Client Side Rendering

CSR의 구동 방식은 초기 로드 시 빈 HTML과 모든 로직이 담겨있는 JavaScript를 다운로드한다. 이후부터는 사용자의 요청에 따라 HTMl에 JavaScript를 이용하여 DOM을 동적으로 생성한다. CSR은 초기 로딩 시 HTML과 JS를 모두 받아왔기 때문에, 사용자의 요청에 대한 반응 속도가 빠르다. 그 이유는 서버에 갔다 올 필요없이 이미 받아온 JS로 즉시 반영되기 때문이다.

그러나 CSR 방식을 채택한 SPA(SIngle Page Application)은 JavaScript를 사용하여 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에 웹 크롤러가 페이지를 색인화하려고 하면 내용이 없는 빈 페이지처럼 보이게 된다는 단점이 있다.

 

 

|  CSR의 장점

• JavaScript를 사용해서 동적으로 DOM을 그려내기 때문에 원하는 내용만 업데이트할 수 있다.
• 사용자의 요청에 대한 반응 속도가 빠르다.
• 필요한 리소스만 부분적으로 로딩이 가능하기 때문에 서버에 부담을 주지 않는다.
• 전체 페이지를 업데이트 할 필요가 없기 때문에 깜박거림이 없어 사용자 친화적이다.

 

|  CSR의 단점

• 모든 JavaScript 파일을 한번에 다운받기 때문에 초기 로딩 속도가 느리다.
• 검색엔진최적화(SEO)에 불리하다. 
• 보안 이슈 : SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.

 

 

 

SSR(Server Side Rendering)

서버 사이드 렌더링이란 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 페이지 전체를 렌더링하는 방식을 말한다. MPA(Multiple Page Application)가 SSR 방식을 채택하고 있다.

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

SSR의 구동 방식은 클라이언트가 초기 화면을 로드하기 위해 서버에 요청을 보낸다. 요청을 받은 서버는 화면에 표시하는데 필요한 데이터와 CSS를 모두 적용한 다음 렌더링 준비를 마친 HTML과 JavaScript를 브라우저에 전달한다. 브라우저는 전달받은 페이지를 바로 화면에 뿌려준다. 

 

 

|  SSR의 장점

• 화면을 구성하는 각각의 페이지가 존재하기 때문에 검색엔진최적화(SEO)에 유리하다.
• 서버에서 이미 렌더링을 마친 후 가져오기 때문에 초기 로딩 속도가 빠르다.

 

|  SSR의 단점

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 깜박거림이 발생한다.
• 새로운 요청이 발생할 때마다 불필요한 부분도 다시 렌더링되기 때문에 서버에 부담이 될 수 있다.

 

 

 

 

 

 

[참고자료]

SPA vs MPA 개념, 장단점

웹 브라우저의 렌더링이란? | 요즘IT

SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)

CSR과 SSR의 차이점

SSR(Server Side Rendering)과 CSR(Client Side Rendering) 차이