SPA란

SPA는 하나의 웹 브라우저 와 하나의 도큐먼트만 로드하는 싱글 웹페이지, 웹사이트 또는 웹 어플리케이션입니다. SPA는 유저가 사용하는 동안 페이지의 리로딩reloading이 필요없고, 컨텐츠의 변경, 변화가 필요할 때만 그 부분만 업데이트가 됩니다. 이는 자바스크립트의 API를 통해 구현할 수 있습니다. 리액트는 SPA를 구현하는 자바스크립트 라이브러리 중 하나로 현재 가장 많이 사용되고 있습니다.

SPA의 장점으로는 빠른 속도, 향상된 유저 경험, 효율적인 캐싱, 더 적은 서버 리소스(자원)사용, 간소화된 개발 프로세스 등의 장점이 있습니다.

• 새로운 페이지 요청 시 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가진다.
• 새롭게 갱신되는 부분만 렌더하기 때문에 새로고침이 발생하지 않아 화면 깜빡임 없이 빠른 화면 이동이 가능하다.
• 트래픽의 감소와 속도,반응성의 향상으로 인해 앱처럼 자연스러운 사용자 경험(UX)를 제공하며 모바일 사용이 증가하는 시점에 이는 큰 장점이 된다.
• 모듈화 또는 컴포넌트별 개발이 용이하다.
• 백엔드와 프론트엔드가 비교적 명확하게 구분된다.

1.  

 

SPA의 단점으로는 낮은 SEO, 최초 로딩 시간, 브라우저 기록 저장, 너무 커지는 자바스크립트 파일의 사이즈 등이 있습니다.

• 웹 애플리케이션에 필요한 정적 리소스를 한번에 다운로드 하기 때문에 초기 구동 속도가 느리다.
• SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데, 해당 로직들은 JavaScript를 통해 구현되므로 코드가 외부에 노출되는 보안적인 문제가 있다.
• 검색엔진 최적화(SEO)가 어렵다.

 

SPA가 검색엔진 최적화(SEO)에 부적합한 이유

검색 엔진이 크롤링할 때 JavaScript를 실행하지 않고 어플리케이션이 로드되기 전의 빈 상태의 코드를 크롤링하기 때문에 인덱싱이 제대로 이루어지지 않는다.