-
SSR vs CSR vs SPA개발/Front-end 2021. 8. 2. 23:39
SPA(Single Page Application)
- 앱에 필요한 모든 정적 리소스를 최초 한번만 받아 오고 이후에는 동적으로 DOM을 구성하여 렌더링 되는 화면만 바꾼다.
- 페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할 때, 페이지가 새로 고침되거나 다른 페이지로 넘어가지 않는다.
- 클라이언트 렌더링 방식을 채택
장점
- 전체적인 트래픽을 감소시킨다.
- 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다. -> 모바일 퍼스트 전략에 적합
단점
- 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다. -> 최초 첫 페이지(어느 정도 그려진)를 서버로부터 받는 SSR을 진행하여 속도를 개선할 수 있다.
- SEO(검색엔진 최적화) 문제 -> SPA 프레임워크(앵귤러, 리액트..)에서 SSR을 지원하여 SEO에 대응할 수 있다.
전통적 Link Tag와 차이
- Link tag는 새로운 페이지를 요청할 때마다 정적 리소스를 다운 받고 전체 페이지를 다시 렌더링한다.
- 새로고침이 매번 발생되어 사용성이 좋지 않고 변경이 필요 없는 부분을 포함하여 전체 페이지를 갱식하므로 비효율적이다.
SSR(Server Side Rendering)
서버가 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.
- 브라우저가 서버에 페이지 요청한다.
- 서버는 DB에서 데이터를 가져오든 뭐든, 필요한 데이터를 모두 매핑시킨 HTML을 만들어 브라우저에 응답한다.
- 브라우저는 응답 받은 페이지를 렌더링한다. 이 때부터 사용자는 페이지를 볼 수 있다. 동시에 브라우저는 필요한 JS 파일들을 다운 받는다. [Viewable]
- 브라우저가 React를 실행한다.
- 드디어 페이지가 사용자와 상호 작용 할 수 있게 된다. [Interactable]
CSR(Client Side Rendering)
데이터 없는 빈 HTML 파일을 받아오고 데이터는 문서와 여러 static 파일들이 로드된 후에 요청해서 받아오는 방식
- 서버가 아래와 같은 빈 HTML을 보내준다.
<html> <head> <script src="client-side-framework.js"></script> <script src="app.js"></script> </head> <body> <div class="container"></div> </body> </html>- 브라우저는 JS 파일을 다운로드 받는다.
- 브라우저가 리액트를 실행한다.
- 드디어 사용자가 페이지를 볼 수 있고 상호 작용할 수 있다. [Viewable & Interactable]
'개발 > Front-end' 카테고리의 다른 글
CSS Media Query (0) 2021.08.02 DOM API란? (0) 2021.08.02 CORS란? (0) 2021.08.02 부트스트랩의 sr-only 클래스가 하는 일 (0) 2021.08.02 가깝고도 먼 HTML (0) 2021.08.02