SPA 이해 (2021. 04. 26)

SPA 중심에는 대표적인 라이브러리/프론트프레임워크 React, vue/Angular, Blazor WebAssembly가 있다.

📖 SPA (Single Page Application)

기존의 웹서비스는 클라이언트(사용자)가 요청하면 서버가 해당 웹 페이지를 HTML 코드로 계산하고 반환하며, 많은 요청이 이루어지면 계산이 더욱 오래 걸립니다.

SPA는 모든 처리가 단일 페이지에서 수행되는 방식입니다. 첫 로드시에만 웹페이지를 계산하여 HTML로 반환합니다. 그 이후에는 필요한 데이터를 HTML로 전달받지 않고 (서버에서 렌더링 X) 필요한 데이터만 서버로부터 JSON으로 전달받아 동적으로 렌더링 합니다.

장점

1. 빠른 로딩 시간 (Quick Loading Time)

• 단일 페이지에서 웹 앱에서 페이지가 로드되면 서버는 더 이상 HTML 또는 CSS를 보내지 않기 때문입니다.
  (Google Reasearch에 따르면 페이지를 로드하는 데 200 밀리 초 이상 걸리면 비즈니스와 판매에 큰 영향을 미침)

2. 좋은 캐싱 능력 (Good Caching Abilities)

• 로컬 데이터를 효율적으로 캐시 할 수 있습니다. SPA는 하나의 요청 만 보내고 서버의 모든 데이터를 저장, 데이터에 대한 지속적인 액세스가 있기 때문에 사용자는 오프라인으로 작업할 수도 있습니다. (방문자에게 데이터비용을 요구하지 않음)

3. 신속한 프런트 엔드 개발 (Rapid Front-End Developement)

• 단일 페이지 애플리케이션 아키텍쳐이기 때문

4. 향상된 사용자 경험 (Improved User Experience)

• 굳이 새 페이지가 로드 될 때까지 기다릴 필요가 없음, 콘텐츠의 동적인 로드는 사용자에게 좋은 경험을 제공

주의

초기 구동속도가 느릴 수 있음.

검색엔진 최적화(SEO)

 

왜 SPA를 사용하나요?

단일 페이지 웹 앱 (SPA)는 웹 개발을 고려할 때 이상적인 선택입니다. Saas플랫폼, SEO가 중요하지 않은 커뮤니티에 쓰입니다.

프로그램과 사용자간의 훌륭하고 풍부한 통신을 원한다면 SPA 접근 방식이 필요합니다.