SPA 그리고 CSR, SSR

G E Lee·2023년 2월 9일
0

computer science

목록 보기
3/3
post-thumbnail

❓ SPA (Single Page Application)

단일 페이지 어플리케이션.
배포가 간단하고 네이티브 앱과 비슷한 사용자 경험을 제공한다.
SPA는 최초 접근시 어플리케이션 구동에 필요한 정보를 한 번만 다운받는다. 새로운 데이터로 다른 페이지에 접근시 새로운 데이터만 다운받아 불필요한 트래픽을 감소시키고, 변경되는 부분만 갱신하여 새로고침이 발생되지 않는다.
SPA는 CSR 방식으로 어플리케이션을 구현한다.

1. CSR (Client Side Rendering)

렌더링이 브라우저(클라이언트)에서 일어난다.
서버는 요청을 받아 클라이언트에 HTML, JS를 전달하고, 클라이언트는 요청을 전달받은 후 렌더링을 시작한다.
사용자는 서버에서 HTML, JS를 전달해서 JS 실행, HTML이 렌더링이 될 때 까지 아무것도 볼 수 없다.

2. SSR (Server Side Rendering)

렌더링이 서버에서 일어난다.
서버는 렌더링이 가능한 HTML를 준비 후 클라이언트에게 전달한다. 클라이언트는 전달받자마자 즉시 렌더링한다.
사용자는 JS가 다운로드 및 실행되는 동안 HTML을 보고있을 수 있다.

❗ SPA 단점 및 장점

단점

  • 어플리케이션이 구동되기 위한 모든 리소스를 처음 한 번만 다운로드 받기 때문에 구동 속도가 엄청나게 느리다. 이 점은 웹 어플리케이션보다 앱 어플리케이션에 적합하다.
  • 자바스크립트 기반 비동기 모델인 CSR방식으로 렌더되기 때문에 필요한 부분만 페이지 내부에서 렌더되므로 주소창이 변경되지 않는다. 이 때문에 사용자 활동 추적이 불가능하므로 SEO(검색엔진 최적화)에 취약하다. 이 점 또한 웹 어플리케이션보다 앱 어플리케이션에 적합한 부분이다.

장점

  • 매번 서버에 요청을 보내지 않아도 되므로 네이티브 앱과 비슷한 빠른 인터렉션 구현이 가능하다. 첫 페이지에서 모든 리소스를 다운 받았기 때문에 다른 페이지로 이동시 로딩 속도가 빠르다.
  • 사용자 경험(트래픽 감소와 속도, 사용성, 반응성)향상에 도움을 주며 모바일 퍼스트 전략에 적합하다.



참고: SSR과 CSR의 차이, SPA & Routing, CSR과 SSR의 장단점

profile
배움은 끝이 없다

0개의 댓글