SPA, CSR, SSR

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으로 해결