[WEB] SPA, single page application 란

SPA 란?

SPA 란 Single Page Application의 약자로 말 그래도 해석해보면 페이지가 한 개인 어플리케이션이라는 뜻입니다.

여기서 페이지가 하나라는 의미가 무슨 의미일까요? SPA 가 등장하기 전 웹 어플리케이션은 여러 페이지로 구성하였습니다. 쉽게 말해 로그인 페이지, 회원가입 페이지, 글 작성 페이지 등이 있고 사용자가 새로운 페이지에 대한 요청을 보내면 서버로부터 리소스를 전달받아서 이를 렌더링하는 방식으로 동작하였습니다.

하지만 시간이 지나 웹에서 점점 더 많은 정보를 제공하게 되었을 뿐만 아니라 스마트폰의 보급으로 컴퓨팅 파워가 낮은 모바일 기기를 통한 웹 어플리케이션접속도 빠르게 증가하였습니다. 이는 속도 저하로 귀결되었습니다.

그래서 렌더링 하는 역할을 서버에게 넘기지 않고 브라우저에서 처리하도록 합니다. 브라우저는 페이지가 처음 로딩 될 시 필요한 리소스를 다운 받은 후에 정보가 필요해질 경우에만 서버에게 정보를 요청합니다. 서버는 브라우저가 로드된 다음에 필요한 최소한의 정보만을 제공하는 방식으로 이러한 문제를 해결하고자 하였습니다.

 

장점

• 위에서도 언급하였지만 html, css, javascript 를 어플리케이션의 라이프사이클에서 한 번만 로드합니다.
• 서버 쪽에서는 렌더링될 페이지를 상관쓰지 않아도 되고, 웹어플리케이션과 모바일 어플리케이션에 상관없이 데이터만 넘겨주면 됩니다.
• 이러한 장점들은 사용자 친화적으로 다가가며 UX 적으로 우수합니다. 사용자의 요청에 빠르게 반응하게 됩니다.

 

단점

• 검색엔진 최적화(SEO) 에 부적절합니다. 크롤러가 어플리케이션이 로드되기 전의 빈 껍데기만 크롤링하기 때문에 인덱싱이 제대로 되지않습니다.

  물론 이러한 문제점을 해소하기 위해서 prerender.io 와 같은 서비스나 server side rendering 방식을 택하기도 합니다.

• 클라이언트 쪽이 무거워져 초기에 로드되는데 시간이 걸립니다.

  이 역시도 해결하기 위해 여러 방법에 대두되고 있습니다. 초기 페이지에서 모든 리소스를 전부 다운 받지 않고 리소스를 Chunk 단위로 묶어 요청이 있을 시 다운받는 방식으로 속도를 개선하기도 합니다.

• 보안문제가 생길 수 있습니다. SPA 를 사용하게 된다면 핵심로직이 클라이언트에서 javascript 를 통해 구현될 수 있기 때문에 이는 코드가 외부에 노출되는 것을 막을 수 없습니다.