SSR vs CSR 비교

SSR(Server Side Rendering)이란?

[출처] https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

✔️ SSR 개념

• 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
• 페이지를 이동할 때마다 서버에 새로운 페이지를 요청한다.
• 모든 페이지는 서버 연산을 통해 렌더링하고 완성된 페이지 형태로 응답한다.

👍 SSR 장점

• SEO(Search Engine Optimization, 검색엔진 최적화)관점에서 유리하다.
  (완성된 형태의 HTML 파일을 서버로부터 받으므로 검색엔진이 페이지를 크롤링하기에 적합)
• 첫 로딩 시간이 매우 짧다.
  (서버에서 이미 렌더링해서 가져오므로)

👎 SSR 단점

• 페이지 이동시 화면이 깜빡거리는 현상을 겪을 수 있다.
  (페이지 요청 시 서버에게 페이지를 받아오는 시간이 필요)
• 화면에서 바뀌지 않아도 되는 부분도 계속해서 다시 렌더링된다. => 서버 과부하 유발
  (다른 요청이 생길때마다 서버에서 데이터까지 모두 포함하여 페이지를 구성하는 과정을 반복)
• 서버 렌더링에 따른 부하
• 모바일 앱 개발시 추가적인 백엔드 작업 필요

---

SPA(Single Page Application)이 대두되면서 CSR 방식이 각광받기 시작하였다.

(SPA는 다음 게시물의 주제로 다룰 예정)

 

CSR(Client Side Rendering)이란?

[출처] https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

✔️ CSR 개념

• 최초에 한번, 서버에서 전체 페이지 로딩해서 보여주고
  이후에는 요청이 있을 때마다 리소스를 서버에 제공한 후 클라이언트가 해석하고 렌더링하는 방식이다.
• 웹 애플리케이션에 필요한 모든 정적 리소스(HTML,CSS,JS)를 최초 단 한 번만 다운로드한다.
• 이후에 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만을 전달 받아 페이지를 갱신한다.
• 즉, 최초 요청 시 한 페이지만 불러오고, 페이지 이동 시 기존 페이지를 수정하여 보여주는 방식이다.
• 새로고침 과정 없이 필요한 부분만 받아서 화면 갱신이 가능하다.

👍 CSR 장점

• SSR보다 초기 전송되는 페이지 속도 빠르다.
• 페이지 전환 속도가 빠르다.
• 더 나은 사용자 경험(UX)을 제공한다.

👎 CSR 단점

• SEO에 취약할 수 있다.
  (Google Bot(구글 크롤러)은 JavaScript를 지원하기 때문에 예외지만, 
  네이버나 다음은 JavaScript를 해석할 엔진이 없어서 빈 페이지로 인식)
• 전체적인 페이지 완료 시점은 SSR보다 느리다.
  (서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에)
• 번들된 js파일 다운로드로 초기 진입속도가 SSR에 비해 느리다.
  (*code splitting(코드 분할) 기능으로 어느 정도 해결은 가능)

*코드 분할(Code Splitting)

번들링은 훌륭하지만 여러분의 앱이 커지면 번들도 커집니다. 특히 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 합니다.
번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 “나누는” 것입니다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다.
코드 분할은 여러분의 앱을 “지연 로딩” 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다.

- 출처 : 리액트 홈페이지 (https://ko.reactjs.org/docs/code-splitting.html)

 

그래서 SSR, CSR 중 어떤 방식을 사용해야 할까요?

어떤 방식을 사용하든 트레이드 오프는 존재하므로 확실한 정답은 없다고 생각합니다.

현재 개발하는 프로그램의 특성에 맞게,

SEO 관점이 중요한지 어떤 고객이 타겟팅인지 등을 고려하여 선택하면 될 것 같습니다.

 

 

 

[도움주신 사이트]

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8