SPA, CSR, SSR

Suyeon·2020년 10월 22일
0

Interview prep

목록 보기
9/22

SPA란?

오늘날의 웹사이트는 단순 웹사이트를 넘어 progressive web app의 경우가 많다. 다양한 기기에서 (모바일, 태블릿등) 더 responsive한 빠른 인터렉션을 구현하기 위해서 등장했다. SAP는 PWA에서 자주 사용되는 기술이다.

  • PWA는 앱에 가까운 웹사이트라고 생각하면 됨 (다이나믹)

기존의 server-side rendering은 유저가 페이지를 이동 할 때마다 서버로 부터 html파일을 받아와서 새로고침을 해서 렌더링 하는 형태였다. 하지만 SPA의 경우, 첫 로딩 때 모든 컨텐츠를 받아오고, 페이지를 이동할 때 마다 routing을 사용하여 (history API) 서버로 html을 다시 받아오지 않고, AJAX를 이용하여 비동기적으로 필요한 부분만 다이나믹하게 렌더링 해서 보여준다.

  • SPA와 SSR 둘다 가능함

장점

  • 유저에게 좋은 UI 제공 (하얀 화면 깜빡거림 없음)
  • http request 감소 (초기 다운로드시 한번만)
  • 서버의 코드 재사용성 증가(모바일등을 위해서는 client code만 수정)

단점

  • 초기 로딩이 오래걸림
  • SEO가 취약함

Server side rendering (SSR)

  • 전통적인 렌더링 방식
  • browser => Web server => WAS => DB
  • 서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달
  • Next.js, gatsby

장점

화면을 그리는데 필요한 데이터를 미리 fetching한 뒤, 완성된 html을 받기 때문에, SEO가 높고, 초기 로딩속도가 빠르다.

단점

  • 페이지 이동, 클릭등 클라이언트의 요청이 생길 때마다 위의 과정을 반복하기 때문에, 불필요한 새로고침이 발생한다.(flickering 발생) 또한 화면에서 바뀌지 않아도 되는 부분이 다시 렌더링이 되기 때문에, 서버 부하를 일으킬 수 있다.

Client side rendering (CSR)

  • 데이터/동적 컨텐츠 제외한 화면 전체를 그리는데 필요한 코드 먼저 web server로부터 bundle.js로 받아진다. (빈 html파일과 최소한의 스크립트 태그) => 브라우저에서 자바스크립트 실행 => hydration
  • SPA를 구현가능하게 함
  • create-react-app

장점

  • 낮은 traffic 발생 (AJAX를 통해 필요한 부분만 업데이트)
  • 페이지 새로고침이 없음 (스무스한 User experience 제공)

단점

  • 취약한 SEO
  • 초기 로딩속도 느림(bundling된 javascript를 실행해야하기 때문) => code splitting으로 해결
profile
Hello World.

1개의 댓글

comment-user-thumbnail
2020년 11월 10일

"SAP는 PWA에서 자주 사용되는 기술이다." 오타가 있는 것 같습니다.

답글 달기