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

Question

SSR(Server side rendering)의 장단점은 무엇인가요?기존 클라이언트 사이드 랜더링과의 차이점도 알려주세요

아임유얼파더 · Accepted Answer

기존에 spa 방식으로 웹 어플리케이션을 작성하셨다면, Client Side Rendering(혹은 Client Side Navigation)에 익숙하실 거라고 생각합니다. 이 경우는 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 그 후에는 데이터만 서버와 통신하는 방식으로 화면의 새로고침 없이 페이지 간 이동을 할 수 있습니다. 중복된 리소스 요청없이 정확히 필요한 요청만 하기 때문에 대부분의 경우 퍼포먼스 상 이득이 있고, 사용자에서 네이티브 앱과 비슷한 수준의 향상된 사용자 경험(UX)을 제공할 수 있어서 최근 spa 가 대세가 되고 있습니다.하지만 전통적인 방식의 ssr 도 계속해서 널리 사용될 것이라고 보는데요. 클라이언트에서 렌더링하는 spa 방식은 웹 서비스를 제공하는 입장에서는 치명적인 단점이 존재하기 때문입니다. spa 는 검색엔진최적화 SSR(Search Engine Optimization)에 불리합니다. 검색 엔진의 크롤링 봇이 최초 페이지를 로딩하고 JavaScript 가 구동되기전에는 아래와 같은 소스만 긁어갈 수 있습니다. 그래서 spa 방식의 웹사이트들도 검색엔진에 효과적으로 노출하기 위해서 ssr 을 적극 도입하고 있습니다. 클라이언트 렌더링

전통적인 웹사이트는 서버사이드 렌더링 방식(SSR)을 사용했습니다. 매 페이지 요청마다 페이지 리로딩(새로고침)이 발생하며, 완성된 형태의 HTML(위 소스코드에 데이터가 이미 삽입된 상태)를 받습니다. 이 방식은 앞서 말씀드린대로 보안과 검색엔진최적화(SEO) 에는 강점이 있습니다. 단점으로는 spa 와는 정반대로 서버의 리스폰스에 의존해서 페이지를 이동해야하기 때문에 퍼포먼스, 사용자와 인터렉션과 사용자 경험(UX) 측면에서 떨어진다고 볼 수 있습니다.어떤 방식을 사용하든 트레이드 오프는 존재한다고 생각합니다. 어느 한 쪽이 더 우월하다고 말하기는 어렵고 제공하고자하는 웹 서비스의 특성에 맞게 선택하시면 좋을 것 같습니다.추가적으로 React 의 Next.js 와 Vue.js 의 Nuxt.js 같은 프레임워크를 이용하면 서버사이드 렌더링과 클라이언트 사이드 네비게이션의 장점을 융합한 형태의 서비스를 만들 수 있습니다. 이는 최초 리퀘스트는 SSR 을 하고 그 이후에는 spa 어플리케이션과 같이 동작해서 SEO 와 사용자 경험 모두를 만족시키려는 목적으로 개발되었습니다.

생활꿀팁

생활꿀팁

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