CSR/SSR 개념, 장단점, CSR 등장 배경

브라우저 렌더링 방식에는 CSR(Client Side Rendering)과 SSR(Server Side Rendering) 두 가지가 있다. 이 둘의 차이점, 장단점을 알아보고 이를 공부하며 생긴 궁금증을 풀어보려 한다.

 

---

CSR  (Client-Side Rendering) 개념

클라이언트 쪽에서 렌더링 하는 거다.
클라이언트가 웹사이트 렌더링에 필요한 html, css, js를 전부 받고, js를 실행해 html을 채운다고 보면 된다.

다음은 렌더링 과정이다.

1. 사용자가 웹사이트를 요청
2. 서버가 빈 html 껍데기와 번들된 javascript 파일들을 클라이언트에게 보냄 (=최초에 한 번 싹다 보내는 거임)
3. 브라우저가 html & javascript를 다운로드함
4. 브라우저가 javascript를 실행하여 화면을 그림 (=DOM을 광범위하게 수정해 최종적인 html을 렌더링함)
   
   • 이제 사용자는 placeholder로 채워진 웹사이트를 보게 됨
   • 이후 API 요청으로 placeholder 자리에 데이터를 채움 => 웹페이지가 상호작용 가능해짐
5. 사용자가 상호작용을 하면, 수정이 필요한 부분만 바꿔서 다시 렌더링함

 

SSR (Server-Side Rendering) 개념

서버 쪽에서 렌더링해서 클라이언트에게 보내주는 방식이다. (전통적인 방식)
서버가 html을 다 채워서(필요한 데이터, css까지 적용) 클라이언트에게 보내준다고 보면 된다.

다음은 렌더링 과정이다.

1. 사용자가 웹사이트를 요청
2. 서버가 데이터, css가 적용된 html을 만들어 클라이언트에게 보냄
3. 브라우저가 html을 다운로드하고, 띄움
   • 이제 사용자는 웹페이지를 보게 됨
4. 사용자가 상호작용을 하면, 1~3과정을 통해 다시 렌더링함(=새로고침처럼)

---

CSR의 장단점

👍장점

• 서버 부하가 덜함
• (SSR에 비해) 인터랙션이 빠름
  • SSR은 페이지 전체를 다시 렌더링(새로고침 발생)하는 반면, CSR은 필요한 부분만 다시 불러오기 때문

👎단점

• 첫 페이지 로딩이 느림
  • 웹사이트의 전체를 한 번에 다운로드하고, 그게 다 돼야 첫 페이지가 보이니까
  • code splitting을 통해 어느 정도 해결할 수 있음
• 검색엔진최적화(SEO)에 약함
  • 처음에 html을 다운로드했을 때, javascript는 다운로드하지 않은 상태임
  • => javascript가 실행되어야 콘텐츠가 생기고 그래야 metadata가 바뀜
  • => 결국 검색엔진 봇이 처음에 서치한 html는 metadata가 없는 빈 껍데기같은 상태인 셈

 

SSR 장단점

👍장점

• 첫 페이지 로딩이 빠름 (즉각 렌더링할 수 있게 하니까)
• 검색엔진최적화(SEO)에 좋음 (서버에서 html을 완성해서 주니까)

👎단점

• 서버 부하가 일어날 수 있음
• (CSR에 비해) 인터랙션이 느림
  • 사용자가 상호작용할 때마다 매번 서버에 요청하고 페이지를 렌더링해야하기 때문

---

왜 CSR이 생겨났을까?

과거에는 SSR 방식으로 웹 렌더링을 했다. 그런데 시간이 흐르면서 웹이 많은 데이터를 담아야 하고, 상호작용도 자주 일어나고, 더 예쁘고 좋은 UI/UX를 필요로 하는 등 SSR이 단점이 극대화되는 쪽으로 웹이 발전했다. 또 SSR 방식은 페이지 깜빡임 문제(Blinking Issue)도 가지고 있었다. (이외에도 개인 컴퓨터의 성능 향상, javascript 표준화 등 여러 복합적인 것들이 CSR 등장의 이유가 됨)

 

웹의 발전에 따라 발생한 SSR 방식의 문제점들을 해결하기 위해 *SPA(Single Page Application), CSR이 등장했다. 서버에서 매번 html을 완전히 만들어서 보내지 말고, 클라이언트가 필요한 데이터를 json으로 요청하면 그에 맞는 응답을 보내고, 클라이언트는 javascript를 실행해서 그 데이터를 업데이트(렌더링)하자"는 거다.

*SPA(Single Page Application)는 한 페이지에 머물면서(=동일한 url에서) 어떤 인터랙션이 일어나면 그에 필요한 데이터만 업데이트하는 그런 방식이다(CSR 방식 사용). 말 그대로 하나의 페이지로 이루어진 애플리케이션이다.
대표적으로 React가 SPA를 만드는 것을 지원하는 라이브러리 중 하나이다.
'react로 만든 어떤 사이트는 url이 하나만 있지 않던데' => 그건 라우팅을 써서 그런 거고 일단 기본적인 개념은 이렇다는 거임

---

언제 뭘 써야 할까?

- CSR이 좋은 경우

• 웹사이트 내 상호작용이 많이 일어나는 경우
• 서버 부하가 일어나면 곤란한 경우 (서버 성능이 안 좋은 경우)

- SSR이 좋은 경우

• 첫 페이지 로딩이 빨라야 하는 경우
• 검색엔진최적화(SEO)가 중요한 경우 (ex. 네이버 블로그)
• 웹사이트에 상호작용이 많이 없는 경우