SPA란? Single Page Application

Single Page Application (SPA)란?

-  하나의 HTML 파일에서 모든 컨텐츠를 동적으로 로드하는 애플리케이션

 

인스타그램이나 음악 사이트 등 어떤 웹사이트에서 특정 기능을 누르면 새로고침 없이 화면이 표출된다. 

마치 앱처럼 작동하는 웹사이트들을 Web-App(웹 앱) 이라 한다. 

이런 웹앱은 Single Page Application 으로, 새로고침 없이 부드럽게 움직인다.

 

앱처럼 작동하게 만들어진 웹이므로, 앱으로 발행 쉽다.

 

 

SPA의 특징 및 장점

1. 하나의 HTML 파일

: 처음 로드 시 하나의 HTML 만 로드하고, 이후 필요한 콘텐츠는 JavaScript로 동적으로 가져와 렌더링한다.

기존의 여러 페이지를 로드하는 방식(MPA, Multi Page Application)과 달리, 페이지 전환 없이 화면을 렌더링한다.

2. 빠른 사용자 경험(UX) 

: 새로고침 없음, 페이지 로딩 속도 빠름, 필요한 데이터만 서버와 교환하므로 네트워크 요청 최소화, 서버 부하 감소

3. 클라이언트 사이드 렌더링(CSR)

: 서버에서 HTML을 생성하지 않고 클라이언트(브라우저)가 JavaScript를 사용해 HTML을 동적으로 생성

4. 라우팅 관리

: URL은 변경되지만 실제 페이지는 새로고침 되지 않는다.

JavaScript 기반 라우팅(React Router, Vue Router)을 통해 URL과 화면 상태를 관리한다.

5. 개발 및 유지보수 편리

: 컴포넌트 기반으로 화면을 구성하므로, 재사용성과 유지보수 용이함

6. 모바일 앱으로 발행이 쉬움 (웹앱의 특징)

 

 

SPA의 단점

1. SEO(검색 엔진 최적화) 어려움

: 클라이언트 사이드 렌더링 방식(CSR)으로 인해, 크롤러가 콘텐츠를 제대로 인덱싱 못 할 수 있음.

이를 해결하기 위해 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 함께 사용하기도 함

2. 초기 로딩 속도

: 애플리케이션 크기가 크면 초기 로딩 시간 길어질 수 있음

3. JavaScript 의존성

: JavaScript가 비활성화된 환경에서는 애플리케이션이 작동하지 않을 수 있음

4. 복잡한 상태관리

: SPA는 브라우저 내에서 상태를 관리하므로, 복잡한 상태 관리 로직이 필요하다.

 

 

SPA를 만들 때 유용한 라이브러리 ( := 웹앱을 만들 때 유용한 라이브러리 )

React, Angular, Vue, Svelte, Preact, SolidJS 등등

리액트가 가장 사용자가 많다.

 

 

SPA의 작동 원리

1. 초기 로드 : 웹 애플리케이션에 접근하면, 서버에서 단일 HTML 파일과 JavaScript 파일을 클라이언트로 전송

2. 클라이언트 사이드 렌더링 : JS가 실행되면서 필요한 DOM 요소 동적 생성하고 렌더링

3. 데이터 통신 : 사용자의 요청에 따라 서버에서 JSON 데이터만 받아와 화면 업데이트 

4. 라우팅 : URL이 변경되더라도 페이지 새로고침 없이 화면 업데이트, 이를 위해 히스토리 API 사용

 

 

SPA와 관련된 다른 아키텍처

1. MPA (Multi Page Application) : 전통적인 방식으로, 요청시마다 새로운 HTML 페이지 로드

2. SSR (Server Side Rendering) : 서버에서 HTML 생성하여 클라이언트 제공. SEO와 초기 로딩속도에 유리

3. SSG (Static Site Generation) : 정적 파일로 웹사이트를 미리 생성해 제공, 성능과 SEO 모두 유리

 

 

 

* SPA는 사용자 경험과 개발 효율에서 뛰어나지만, SEO, 초기 로딩 성능같은 단점이 존재함

필요에 따라 SSR 이나 MPA 와 결합하여 개발하는 것이 일반적임.

단점을 상쇄할 만큼 장점이 더 크다!