개발/Front-end

SSR vs CSR vs SPA

devriver 2021. 8. 2. 23:39
반응형

SPA(Single Page Application)

  • 앱에 필요한 모든 정적 리소스를 최초 한번만 받아 오고 이후에는 동적으로 DOM을 구성하여 렌더링 되는 화면만 바꾼다.
  • 페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할 때, 페이지가 새로 고침되거나 다른 페이지로 넘어가지 않는다.
  • 클라이언트 렌더링 방식을 채택

장점

  • 전체적인 트래픽을 감소시킨다.
  • 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다. -> 모바일 퍼스트 전략에 적합

단점

  • 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다. -> 최초 첫 페이지(어느 정도 그려진)를 서버로부터 받는 SSR을 진행하여 속도를 개선할 수 있다.
  • SEO(검색엔진 최적화) 문제 -> SPA 프레임워크(앵귤러, 리액트..)에서 SSR을 지원하여 SEO에 대응할 수 있다.

전통적 Link Tag와 차이

  • Link tag는 새로운 페이지를 요청할 때마다 정적 리소스를 다운 받고 전체 페이지를 다시 렌더링한다.
  • 새로고침이 매번 발생되어 사용성이 좋지 않고 변경이 필요 없는 부분을 포함하여 전체 페이지를 갱식하므로 비효율적이다.

SSR(Server Side Rendering)

서버가 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.

  1. 브라우저가 서버에 페이지 요청한다.
  2. 서버는 DB에서 데이터를 가져오든 뭐든, 필요한 데이터를 모두 매핑시킨 HTML을 만들어 브라우저에 응답한다.
  3. 브라우저는 응답 받은 페이지를 렌더링한다. 이 때부터 사용자는 페이지를 볼 수 있다. 동시에 브라우저는 필요한 JS 파일들을 다운 받는다. [Viewable]
  4. 브라우저가 React를 실행한다.
  5. 드디어 페이지가 사용자와 상호 작용 할 수 있게 된다. [Interactable]

CSR(Client Side Rendering)

데이터 없는 빈 HTML 파일을 받아오고 데이터는 문서와 여러 static 파일들이 로드된 후에 요청해서 받아오는 방식

  1. 서버가 아래와 같은 빈 HTML을 보내준다.
<html>
  <head>
    <script src="client-side-framework.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>
  1. 브라우저는 JS 파일을 다운로드 받는다.
  2. 브라우저가 리액트를 실행한다.
  3. 드디어 사용자가 페이지를 볼 수 있고 상호 작용할 수 있다. [Viewable & Interactable]