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

 

# CSR (클라이언트 사이드 렌더링) 이란?

​

SPA(Single Page Application)

→ 사용자가 한페이지 내에서 머무르면서 필요한 데이터를 서버에서 받아 와서 부분적으로 업데이트 하는것

​

CSR (클라이언트 사이드 렌더링)

서버에서 인덱스라는 HTML 파일을 클라이언트에 보내주면 HTML은 텅텅 비어져 있기 때문에 처음에 접속하면 빈 화면만 보인다.

다시 링크된 어플리케이션 자바스크립트를 서버로 부터 다운받는데 이 자바스크립트에는 로직, 여러가지 소스코드들이 모두 다 포함되어 있다. 그렇기 때문에 사이즈가 커서 다운받는데 시간이 소요된다.

추가로 필요한 데이터가 있다면 서버에 요청해서 데이터를 받아온 다음에 이것을 기반으로 동적으로 HTML 을 생성해서 사용자에게 최종적인 어플리케이션을 보여주게 된다. → 쉽게말해 클라이언트가 다 하는것

​

✨단점

1. 사용자가 첫 화면을 보기까지 시간이 오래 걸린다.

2. 좋지않는 SEO(Search Engine Optimization) → CSR 에서 사용되어지고 있는 HTML 바디는 대부분 텅텅 비어져 있기 때문에 검색엔진들이 CSR로 직상된 웹페이지를 분석하는데 어려움이 있다.

​

이러한 CSR의 문제점들 때문에 SSR 도입.

 

---

 

 

# SSR (서버 사이드 렌더링) 이란?

 

​

SSR (서버 사이드 렌더링)

클라이언트에서 모든 것을 처리하는 방식과는 다르게 웹사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고 이렇게 만들어진 HTML 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보내준다.

그러면 클라이언트 측에서는 만들어진 HTML 문서를 받아와서 바로 사용자에게 보여줄 수 있다.

​

✨장점

1. 페이지로딩이 빨라진다

2. 모든 컨텐츠가 HTML에 담겨져 있기 때문에 효율적인 SEO를 할 수 있다.

​

✨단점

1. Statix Site에서 발생했던 깜박임 이슈가 여전히 존재한다.

2. 서버에 과부하가 걸리기 쉽다. (특히 사용자가 많을수록)

3. 사용자가 빠르게 웹사이트를 확인할 수는 있지만 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드를 받지못해서 동작이 실행되지 않을 수 있다.

​

가장 치명적인 단점인 3번을 이해하려면 TTV / TTI 를 살펴봐야 한다.

​

 

---

 

#TTV / TTI 란?

​

TTV (Time To View) / TTI (Time To Interact)

CSR은 사용자가 웹사이트를 볼 수 있음(TTV)과 동시에 클릭을 하거나 인터랙션(TTI)이 가능하게 된다.

SSR은 사용자가 사이트를 볼 수 있는 시간과 실제로 인터렉션을 할 수 있는 시간의 공백기간이 꽤 길다.

​

- CSR을 많이 사용하는 경우에는

최종적으로 번들링해서 사용자에게 보내주는 자바스크립트 파일을 어떻게 하면 효율적으로 많이 분할해서 첫번째로 사용자가 보기위해 필요한 필수적인 파일만 보낼 수 있을지 고민해보고

​

- SSR을 많이 사용하는 경우에는

사용자가 보고 인터렉션하는 시간의 단차를 줄이기 위해서 어떤 노력을 할 수 있을지 , 어떻게 조금 더 매끄러운 UI와 UX를 제공할 수 있을지 고민해보자

​

요즘에는 꼭 CSR과 SSR를 고집하기 보다 SSG를 사용하기도 한다.

​

---

#SSG 란?

​

SSG(Static Site Generation)

리액트 같은 경우는 CSR에 특화된 라이브러리지만 개츠비라는 라이브러리와 함께 사용하면

리액트로 만든 웹어플리케이션을 정적으로 웹페이지를 미리 생성해서 서버에 배포해 놓을 수 있다.

이렇게 만들어진 웹사이트들이 모두 정적인건 아니고 추가적으로 데이터를 서버에서 받아 오거나 또는 동적으로 처리해야 되는 로직이 있다면 자바스크립트 파일을 함께 가지고 있을 수 있기 때문에 동적인 요소도 추가 할 수 있다.

​

개츠비 다음으로 리액트에서 많이 사용하되는 것이 Next.js 이다.

​

- Next.js은 강력한 서버 사이드 렌더링을 지원하는 라이브러리 였는데

요즘에는 SSG도 지원하고 CSR과 SSR을 잘 섞어서 더 강력하고 유연하게 목적에 맞게 지원해주고 있다.

 

---

 

 

📌 참고
드림코딩 | 서버사이드렌더링