SPA(Single Page Application)

SPA(Single Page Application)

SPA 는 웹 페이지를 구성하는 방법중 하나다. SPA 는 기본적으로 단일 페이지로 구성된다.

SPA 가 아닌 보통의 link tag 를 사용하는 전통적인 웹사이트는 새로운 페이지 요청시 마다 해당 주소로 이동하고 서버통신으로 HTML 코드를 읽어오는 방식을 취하는데, 이것을 서버사이드 렌더링(Server Side Rendering, SSR) 이라고 부른다. 이것은 변경이 필요없는 부분을 포함한 전체 페이지를 갱신하기 때문에 비효율적이다.

하지만 SPA 는 초기 페이지 요청시 모든 정적 리소스를 다운로드 하고, 이후에 페이지 갱신에 필요한 JSON, XML 같은 데이터만 서버를 통해 요청 응답 받는다. 페이지 이동시에는 전체 페이지를 갱신하는 것이 아니라 이미 다운로드한 리소스로 일부 요소만 변경한다. 이것을 클라이언트사이드 렌더링(Client Side Rendering, CSR) 이라고 부른다.

SPA 는 폴더 자체를 Serving 하는데, Build 폴더 자체를 Serving 하는 것을 Static Server 라고 하고, Build 폴더 내에서 Serving 되어 볼 수 있는 파일을 Static File 이라고 한다. 곧, SPA 는 Static Server 를 만들어 사용한다는 것이다. 파일의 Path 자체를 URL 화 시킨다.

장점

- 전체 페이지가 아닌 일부 요소들만 리로드 하기 때문에 성능 상 이점을 가짐

- (서버사이드 렌더링과 비교하여, ) 손쉬운 운영 배포 가능

- 사용자 친화적 (빠른 반응성, 화면전환 애니메이션 등), 네이티브 앱과 유사한 사용자 경험 제공 가능

- 서버 요청이 적음 (REST API 를 통한 데이터 송수신)

단점

- 검색 엔진 최적화 (Search Engine Optimization, SEO) 에 어려움이 있음

- 초기 구동시간 필요

SAP 에서의 서버사이드 렌더링(Server Side Rendering, SSR)

SPA 라고해서 무조건 클라이언트 사이드 렌더링(Client Side Rendering, CSR) 만을 이야기하지는 않는다. SPA 에서도 서버사이드 렌더링을 필요로 하는 시점이 존재한다. 

클라이언트 렌더링은 최초 렌더링 시에는 비어있는 상태이기 때문에 속도가 느리다. 최초 첫 페이지를 렌더링 할 때 어느정도 그려진 페이지를 서버로부터 받아 서버사이드 렌더링을 진행하여 속도를 개선할 수 있다. 

또한 서버사이드 렌더링은 검색 엔진 최적화 SEO(Search Engine Optimization, SEO)  어려움을 해결할 때에도 사용된다.