SPA란 무엇일까?

SPA란?

Single Page Application의 약자로, 하나의 페이지(HTML)에 변경된 정보, 또는 영역을 동적으로 변경하는 것을 말합니다.

그렇다면 하나의 페이지를 동적으로 변경한다는 것이 무엇일까요?

MPA란?

SPA 이전에 MPA(Multi Page Application) 라는 것이 있었습니다.
Multi Page. 즉, 여러 개의 페이지를 갖고 있는 웹 표현 방식입니다.

예시로, 사이트 구성이 헤더, 메인, 푸터로 이루어져 있고 페이지는 메인 화면, 게시판, 회원 정보 열람 페이지로 이루어진 어떤 사이트가 있다고 가정해봅시다. MPA라면 메인 화면, 게시판, 회원 정보 열람 페이지를 각각 독립된 페이지로 서버에 가지고 있다가, 사용자가 링크를 클릭하면 아래 이미지처럼 해당 링크에 맞는 각 페이지를 전송합니다.

때문에 MPA는 SSR(Server-Side Rendering)로 동작합니다.
서버가 각각의 페이지를 가지고 있다가 클라이언트의 요청이 있으면 해당 페이지를 전송해주는 형태입니다.
따라서 MPA는 SSR 방식의 장단점을 모두 가지고 있습니다.

장점

• 초기 로딩 속도가 빠르다.
  첫 화면에 진입했을 때 메인 화면에 해당하는 페이지만 보여주는 형태로 작동하기 때문에 초기 로딩 속도가 빠릅니다.

• SEO에 유리하다.
  페이지가 변경될 때마다 서버에서 새로운 페이지를 보내주는데, 이 페이지는 HTML 기반이기 때문에 크롤링을 통해 색인이 가능합니다. 또한, 매번 새로운 페이지를 전달하기 때문에 각 페이지에 해당하는 적절한 meta 정보를 갖고 있어 SEO에 유리합니다.

단점

• 페이지를 이동할 때 마다 화면이 깜빡거린다.
  초기 로딩 속도가 빠른 장점을 바꿔 말하면 페이지를 이동할 때마다 처음 화면에 진입하는 것처럼 페이지를 새롭게 받아와야 하기 때문에, 페이지가 변경되는 과정에서 화면이 깜빡거리는 것처럼(새로고침) 보이게 됩니다.

• 페이지 이동 속도가 느리다.
  위와 같은 이유로 매번 새로운 페이지 정보를 받아오기 때문에 이동 속도가 느립니다.

SPA란?

SPA는 MPA와 달리 Single Page 즉, 하나의 페이지로 동작합니다.
변경되지 않아도 되는 영역은 그대로 두고 변경되어야 하는 영역만 선택적으로 변경됨으로써 사용자 경험을 개선한 방식입니다.
MPA에서 설명했던 방식과 달리 SPA는 서버가 페이지가 변경될 때마다 헤더와 푸터를 제외한 변경된 메인 페이지 부분만 바뀐 페이지 정보를 전송합니다.

게시판에서도 특정 영역의 화면 변경(컴포넌트)이 필요하다면 아래 이미지처럼 특정 영역만 변경됩니다.

SPA는 기본적으로 CSR(Client-Side Rendering)로 동작합니다. 서버가 전체 페이지를 가지고 있다가 전달해주는 형태가 아니기 때문에 MPA와는 다른 장,단점을 갖게 됩니다.

장점

• 페이지 이동 속도가 빠르다.
  SPA는 클라이언트의 요청에 따라 특정 영역만 변경하는 방식을 사용하기 때문에 MPA 방식처럼 화면에 변화가 있을 때마다 새로고침 되면서 화면이 깜빡이는 등의 변화가 없습니다.
  따라서 사용자 입장에서 페이지가 빠르게 바뀐다는 느낌을 받게 됩니다.

• 서버 부담이 감소한다.
  사용자의 요청이 있는 특정 영역에 대한 변경 내용만을 서버가 보내주면 되기 때문에 MPA 방식보다 서버의 부담이 줄어들게 됩니다.

단점

• 초기 로딩 속도가 느리다.
  SPA는 대부분 자바스크립트로 동작하기 때문에 페이지가 로딩될 때 모든 자바스크립트 파일을 받아와야 한다는 한계가 있습니다. 초기 로딩 화면에 해당하는 페이지만 받아오면 되었던 MPA와는 달리 모든 자바스크립트 파일을 가져와야 하는 SPA의 특성상 초기 로딩 속도가 상대적으로 느립니다.

• SEO에 불리하다.
  SPA는 변경되지 않는 정보들 즉, meta 정보와 같은 헤더 정보들은 고정되어 있고 특정 영역의 변화만을 반영하는 방식이기 때문에 크롤러는 SPA로 만들어진 페이지를 하나의 페이지로 인식합니다. 또한 자바스크립트가 화면의 거의 모든 동작을 책임지고 있기 때문에 자바스크립트를 크롤링할 수 없는 크롤러의 경우 색인할 수 있는 정보를 습득할 수 없습니다.

SPA의 단점을 극복하기 위한 방법

SPA가 가진 단점들 중 역시 가장 큰 단점은 SEO에 불리하다는 것입니다. 사이트 노출이 필요하지 않은 웹사이트보다 필요한 웹사이트가 세상에 훨씬 더 많기 때문입니다. SPA로 만든 사이트를 이러한 단점을 극복하기 위해 다음과 같은 방법을 선택할 수 있습니다.

• 동적 렌더링
  동적 렌더링이란 상대가 누군지에 따라 렌더링 방식을 다르게 하는 방법입니다.
  사용자에겐 기존에 만들어진 CSR 형태의 웹사이트를 제공하고, 크롤러에게는 SSR 형태로 이미 구축된 웹페이지를 전송하는 것입니다. 하지만 최근에 구글에서 동적 렌더링을 권장하지 않는다는 발표가 있었습니다.

• History API 사용하기
  SPA에도 주소를 부여하는 History API를 사용하는 방법이 있습니다. 정적 사이트를 이용할 때와 같은 주소를 부여할 수 있는 방법입니다.

• SSR 사용하기
  SPA를 지원하는 많은 프레임워크와 라이브러리가 기존의 CSR 방식을 개선한 SSR 방식의 프레임워크와 라이브러리를 제공합니다. 흔히 알고 있는 Next.js, Nuxt, Angular Universal, SvelteKit 등이 있습니다.