CSR, SSR, 유니버셜 렌더링

프론트엔드 프레임워크인 Vue나 React를 공부하다보면 많이 보게되는 개념이 CSR, SSR이다. 

각 용어는 웹 페이지가 어떻게 렌더링 되는지에 대한 방식을 얘기한다.

 

1. CSR

CSR은 Client Side Rendering으로 가장 큰 특징으로 웹 페이지를 클라이언트(브라우저)에서 렌더링 하는 것이다.

사용자가 웹 페이지를 이용할 때 클라이언트(브라우저)가 서버에 웹페이지 요청을 하면 서버는 HTML, CSS, Javascript 파일을 전달해주고 클라이언트에서는 서버에서 받은 해당 리소스로 직접 페이지를 그린다.(렌더링한다.)

 

클라이언트 --(웹 페이지 요청)--->  서버

클라이언트  <---(html, css, js 리소스 전달)---  서버

 

그래서 서버에서 내려준 response 값을 봐도 소스는 <div id="app"> 과 같이 간단한 소스만 받아오는 것을 알 수 있다.

 

일반적인 SPA 프레임워크가 CSR에 해당한다. (Vue.js, React...)

 

- 장점

1. 초기에 페이지에 필요한 소스를 한 번에 렌더링 하기 때문에 페이지 전환할 때 빠른 속도와 뛰어난 사용자 경험을 제공한다.

2. 대부분의 연산을 클라이언트에서 처리하기 때문에 서버 부하가 감소한다.

 

- 단점

1. 장점 1에서 말했 듯이 초기에 페이지에 필요한 소스를 한 번에 렌더링 하기 때문에 초기 로딩 시간이 느려질 수 있다.

2. 최초 HTML에 실제 페이지에 노출되는 소스가 아닌 <div id="app"> 과 같이 렌더링을 위한 소스만 보여지기 때문에 SEO에 불리하다.

 

2. SSR

SSR은 Server Side Rendering으로 CSR과 다르게 웹 페이지를 서버에서 렌더링한다.

사용자가 웹 페이지를 이용할 때 클라이언트를 통해 요청을 하면 서버에서 HTML을 다 렌더링한 소스를 클라이언트로 전달한다.

 

클라이언트 --(웹 페이지 요청)--->  서버

클라이언트  <---(서버에서 그린 html 소스 전달)---  서버

 

그래서 서버에서 내려준 response 값에는 내가 요청한 html 소스가 담겨져서 받아온다.

CSR과 다르게 사용자가 페이지를 요청하면 요청을 할 때마다 HTML을 서버에서 그려서 클라이언트로 내려준다.

(CSR은 한 번에 내려준다.)

 

- 장점

1. 서버에서 최초 화면에 대한 HTML을 먼저 제공해주기 때문에 초기 로딩 속도가 빠르다.

2. 최초 HTML에 실제 페이지에 노출되는 소스가 적용되어있기 때문에 SEO에 유리하다.

 

- 단점

1. CSR과 다르게 페이지를 한 번에 로드하는 것이 아닌 사용자의 요청에 따라 필요한 데이터를 서버에서 가져오기 때문에 사용자 경험이 떨어질 수 있다.

2. 서버에 매번 요청을 하기 때문에 서버 부하가 증가할 수 있다.

 

 

3. 유니버셜 렌더링(Universal Rendering)

유니버셜 렌더링은 CSR과 SSR의 장점을 결합해서 사용하는 개념으로 Nuxt.js, Next.js를 통해 사용하는 것이 일반적이다.

유니버셜 렌더링은 초기 화면을 서버에서 SSR로 렌더링 한 후에 사용자들의 페이지 상호작용은 클라이언트에서 CSR로 처리하는 하이브리드형 방식이다.

 

서버에서 생성된 정적인 HTML을 클라이언트에서 동적이고 상호작용 가능한 애플리케이션으로 변환

- 사용자는 먼저 뿌려진 HTML을 보기 때문에 초기 로딩 시간이 빠르다. (자바스크립트가 로드되기 전에 컨텐츠를 본다.)

- 검색엔진이 서버에서 완전히 뿌려진 HTML을 크롤링해서 SEO가 향상 된다.

- 클라이언트에서는 하이드레이션 과정을 거쳐서 서버가 내려준 HTML을 스크립트로 제어할 수 있도록 처리해준다.