Q. SSR의 장단점은 무엇인가요?

존버어 2019. 01. 30. 조회수 497


SSR(Server side rendering)의 장단점은 무엇인가요?

기존 클라이언트 사이드 랜더링과의 차이점도 알려주세요

공유하고 보상받기 ♥︎
댓글 0

1개의 답변이 있습니다.

질문자 & 큐레이터 채택
다스베이더 답변자인증
더콥 개발팀 2019. 01. 30 100%의 채택

기존에 spa 방식으로 웹 어플리케이션을 작성하셨다면, Client Side Rendering(혹은 Client Side Navigation)에 익숙하실 거라고 생각합니다. 이 경우는 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 그 후에는 데이터만 서버와 통신하는 방식으로 화면의 새로고침 없이 페이지 간 이동을 할 수 있습니다. 중복된 리소스 요청없이 정확히 필요한 요청만 하기 때문에 대부분의 경우 퍼포먼스 상 이득이 있고, 사용자에서 네이티브 앱과 비슷한 수준의 향상된 사용자 경험(UX)을 제공할 수 있어서 최근 spa 가 대세가 되고 있습니다.

하지만 전통적인 방식의 ssr 도 계속해서 널리 사용될 것이라고 보는데요. 클라이언트에서 렌더링하는 spa 방식은 웹 서비스를 제공하는 입장에서는 치명적인 단점이 존재하기 때문입니다. spa검색엔진최적화 SSR(Search Engine Optimization)에 불리합니다. 검색 엔진의 크롤링 봇이 최초 페이지를 로딩하고 JavaScript 가 구동되기전에는 아래와 같은 소스만 긁어갈 수 있습니다. 그래서 spa 방식의 웹사이트들도 검색엔진에 효과적으로 노출하기 위해서 ssr 을 적극 도입하고 있습니다.

<html>
<head>
  <title>클라이언트 렌더링</title>
  <link rel="stylesheet" href="main.css" type="text/css">
  <script src="bundle.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>


전통적인 웹사이트는 서버사이드 렌더링 방식(SSR)을 사용했습니다. 매 페이지 요청마다 페이지 리로딩(새로고침)이 발생하며, 완성된 형태의 HTML(위 소스코드에 데이터가 이미 삽입된 상태)를 받습니다. 이 방식은 앞서 말씀드린대로 보안과 검색엔진최적화(SEO) 에는 강점이 있습니다. 단점으로는 spa 와는 정반대로 서버의 리스폰스에 의존해서 페이지를 이동해야하기 때문에 퍼포먼스, 사용자와 인터렉션과 사용자 경험(UX) 측면에서 떨어진다고 볼 수 있습니다.

어떤 방식을 사용하든 트레이드 오프는 존재한다고 생각합니다. 어느 한 쪽이 더 우월하다고 말하기는 어렵고 제공하고자하는 웹 서비스의 특성에 맞게 선택하시면 좋을 것 같습니다.

추가적으로 ReactNext.jsVue.jsNuxt.js 같은 프레임워크를 이용하면 서버사이드 렌더링과 클라이언트 사이드 네비게이션의 장점을 융합한 형태의 서비스를 만들 수 있습니다. 이는 최초 리퀘스트는 SSR 을 하고 그 이후에는 spa 어플리케이션과 같이 동작해서 SEO 와 사용자 경험 모두를 만족시키려는 목적으로 개발되었습니다.

댓글 0