SPA(단일페이지어플리케이션)와 CSR(클라이언트사이드렌더링)

SPA 란?

단일 페이지로 구성된 웹 어플리케이션을 말한다. CSR(클라이언트 사이드 렌더링) 방식을 사용한다.

(루트 컴포넌트(첫화면)을 중심으로 거미줄처럼 다른 컴포넌트와 연결연결되서 사용자가 필요한 컴포넌트만 로딩해서 바로바로 보여준다.)

서버는 단지 JSON 파일만 보내주는 역할을 수행하며

HTML을 그리는 역할은 클라이언트에서 JS로 수행한다.

(Json 객체로 된 텍스트 형식의 데이터를 API 주소를 통해 백엔드에서 보내면 프론트는 그걸 받아 JS 메소드 안에 녹여내어 HTML 로 화면에 보여준다.)

최초에 한 번 서버에서 전체 페이지를 로딩하여 보여주고

사용자의 요청에 따라 클라이언트가 서버에서 받은 데이터를 해석, 렌더링하는 방식이다.

(예전에 SSR 방식으로 프로젝트 할 때, 뭐하나 수정하거나 클릭할 때마다 서버까지 건드려 새로고침이 되어서 불편했었다. 하지만 CSR는 화면을 보면 어느새 바뀌어 있다.)

단점을 파악하고 있으면 반대로 장점도 보인다. 그 자체가 SPA 의 특징이기 때문이다.

1. 초기 구동 속도

앱의 사용성을 추구하고자 SPA에서도 초기에 필요한 대부분의 리소스를 다운로드 받는다.

물론 이것은 초기 구동속도를 조금 손해보고 더 많은 가치(전체적인 앱의 속도/반응성/사용성 등)를 추구하기 위함이다.

2. 검색엔진 최적화(SEO)

SEO 는 웹 사이트의 <html> 태그 안의 특정 텍스트들을 긁어모아 검색사이트의 검색결과에 보여지게 된다.

SPA 로 만든 웹 사이트는 JavaScript 가 실행되서 <html> 태그를 가지고 와야 텍스트가 보여지기 때문에 검색어가 될만한 텍스트들이 SSR 으로 만든 웹사이트에 비교해 적어진다.

크롬은 검색엔진에서 CSR 방식도 검색 봇(Bot)이 컨텐츠를 가져갈 수 있도록 개선하고 있지만 다른 브라우저에서는 그 방향성이 불투명하다.

3. 보안

SPA의 보안문제로 자주 언급되는 것이 사용자 정보가, 기존 서버기반 세션이 아닌 클라이언트 기반 쿠키라는 것이다.

쿠키의 가장 큰 문제는 '도용'이다. 쿠키 정보의 기밀성이나 변조는 쉽게 방어할 수 있지만 누군가의 쿠키를 그대로 복사해서 재사용하는 것은 조금 더 높은 방어기술을 요구한다.

SPA의 보안 측면에서 더욱 심각한 것은 핵심로직이 자바스크립트로 구현된다는 점이다.

기존에는 대부분의 비즈니스 로직이 서버에서 수행되어 최종 결과만을 (HTML 덩어리로) 전달받았을 뿐인데,

SPA에서는 필요한 데이터만 전달받고 많은 비즈니스 기능을 클라이언트에서 수행하기 때문에 핵심 로직이 노출될 수 있다.

핵심로직은 서버에서 수행하도록 하고 중요한 유효성 검사는 양측 모두에서 수행하도록 해야 한다.
SPA라서 더욱 신경써야 할 포인트는 바로 클라이언트에서 수행되는 핵심로직을 최소화시키는 것이다.

4. IE 8 이하 지원 (추가)

React 나 Angular 같은 프레임워크들은 IE8을 지원대상에서 제외하고 있는 추세이다.
따라서 SPA를 진정 원한다면 IE8 이하를 과감히 버리는 것을 고려해야 한다.

Cloud - AWS 란 (0)	2021.07.14
Cloud - IaaS, PaaS, SaaS 란 (0)	2021.06.12
http와 https의 차이 (0)	2021.03.02
블로그에 구글서치콘솔 등록(Google Search Console) (0)	2021.01.21
파일경로 작성법(절대경로와 상대경로) (0)	2021.01.19