SPA (Single Page Application)
단일 페이지 어플리케이션이다. 리액트, 뷰, 앵귤러가 SPA에 해당된다.
SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링(SSR)과 비교할 때 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다.
사용자 경험 향상이 SPA의 핵심 가치이다.
SPA가 언급되면 꼭 알아야하는게 CSR과 SSR이다.
CSR (Client Side Rendering)
클라이언트 쪽에서 렌더링하는 것이다. SPA가 CSR에 속한다.
기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번만 다운로드 한다.
이후 새로운 페이지 요청 시, 페이지 갱신에 필용한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적이 트래픽을 감소시킬 수 있다.
전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하기 때문에 새로고침이 발생되지 않는다.
[장점]
- 사용자의 요청에 따라 페이지 전체가 새로고침 되지 않음 → 불필요한 트래픽 감소, 변경 시 속도 빠름
[단점]
- 검색엔진이 캐치하지 못함 → 하지만 Angular나 React 등 SPA 프레임워크는 검색엔진 문제를 해결할 수 있도록 SSR을 지원하는 기능이 이미 있음
- CSR이 자바스크립트 위주로 돌아가기 때문에 자바스크립트 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 못함. 자바스크립트는 동적인 데이터를 처리하기 때문에 html에 그 동적인 데이터가 표시되지 않을수가 있음. 그래서 검색엔진이 캐치하지 못하는것임
- 초기 로딩이 SSR에 비해 느림
SSR (Server Side Rendering)
서버 쪽에서 렌더링하는 것이다. 일반적인 웹으로 생각하면 될 것 같다.
브라우저에 나타나는 형태 그대로를 HTML로 만들어서 클라이언트로 넘기고, 브라우저는 그 HTML을 표시하는 방식이다.
이 방식이 일부 HTML, Script만 브라우저로 전달하고, 브라우저에서 Script를 실행시켜 서버에서 데이터를 조회하여 HTML을 생성하는 방식으로 사용되었다. (CSR로 바꼈다는 의미)
요즘은 웹에서 제공되는 정보가 많아서 요청할때마다 페이지를 서버쪽에서 리소스 받아서 해석하고 화면에 렌더링 하는 것이 비효율적이다. 불필요한 트래픽도 낭비된다.
[장점]
- 검색엔진 문제가 없음
- 초기 로딩 속도 빠름
[단점]
- 불필요한 트래픽 낭비
- 변경 시 속도가 느림
Do my BEST