SPA란?

쉽게 말해 1개의 페이지만 있는 애플리케이션입니다. 하나의 페이지에서 내용만 바뀌는 것입니다. 서버로부터 새 페이지(html)를 불러오지 않고 현재 페이지를 동적으로 다시 작성하는 웹앱 혹은 웹앱을 작성하는 패러다임, 디자인 패턴입니다. 최초로 한 번 페이지 전체를 로드한 후에는 데이터만 변경해서 쓸 수 있습니다. 서버로부터 정적 파일을 한 번이나 여러 번에 걸쳐 다운로드받고 사용자와 상호작용 중 필요한 데이터만 서버에서 동적으로 받습니다.

전통적인 애플리케이션과 SPA의 차이점

SPA는 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션입니다.

전통적인 애플리케이션

• 전통적인 방식의 웹 페이지는 페이지를 전환할 때마다 렌더링 결과를 서버에서 받기 때문에 화면이 깜빡이는 단점이 있었습니다.
• 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸립니다.
• 즉, 클라이언트가 서버 사이드에게 html, javascript, css 등 화면에 보여줄 데이터를 요청하고, 서버 사이드는 요청된 파일을 클라이언트에게 뿌려주는 형태입니다.

SPA

• 하지만 SPA는 페이지 전환에 의한 렌더링을 클라이언트에서 처리하기 때문에 마치 네이티브 애플리케이션처럼 자연스럽게 동작합니다.
• 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 전통적인 애플리케이션에 비해 화면을 구성하는 속도가 빠릅니다.
• SPA 애플리케이션 안에 html, css, js 등 모든 정보가 이미 내장되어 있는 상태로, 새로운 데이터가 필요한 때만 서버 API 호출을 통해 필요한 데이터만 불러와서 화면에 렌더링하는 방식입니다.

요약

요약하면 전통적인 방식에서는 클라이언트가 최초 요청을 보내면 서버는 html파일을 응답으로 보내고, 클라이언트가 다시 form데이터를 전송하면 서버가 다른 html파일을 응답으로 보내 페이지가 리로드되는 방식이었습니다. 그러나 SPA는 form 작성 시, ajax 혹은 axios를 이용해서 form 데이터의 일부를 전송하는데, 서버는 JSON 데이터를 응답으로 보내주는 방식입니다. 즉, 화면 이동 시 필요한 데이터를 서버로부터 JSON 데이터로 전달받아 동적으로 렌더링합니다.

single page라고 해서 화면이 한 종류일까?

아닙니다!
사용자에게 보여준 페이지(사용자가 해당 url에 접속한 페이지)는 한 페이지지만, 사용자가 원하는 해당 페이지와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있습니다. 다른 주소에 다른 화면을 보여주는 것을 라우팅이라고 합니다.

SPA의 장단점

장점

• 하나하나 화면 전체를 렌더링할 필요가 없기 때문에 화면이동이 빠릅니다.
• 화면에 필요한 부분의 데이터만 받아서 렌더링하기 때문에 처리과정이 효율적입니다.
• 유저의 입장에서 사용하기 편리합니다.(렌더링이 빠르기 때문.)
• 서버 요청이 비교적 적습니다.
• 트래픽 총량이 줄어듭니다.

단점

• 처음 화면을 로딩할 때, 모든 화면이 미리 준비되어 있어야 하기 때문에 로딩에 시간이 걸립니다.
• 애플리케이션의 규모가 커지면 js파일이 너무 커집니다.(페이지 로딩 시 실제 사용자가 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문입니다.) => code splitting으로 해결 가능한 방법이 있습니다.
• SEO, 크롤러가 페이지 정보를 수집하지 못하여 페이지 검색이 힘듭니다.
  • 그 이유는 js가 로딩이 되기 전에 DOM은 비어있으므로 즉, js가 실행될때 까지 페이지가 비어 있어서 로딩 대기 중의 짧은 시간동안 빈페이지가 화면에 띄워져 있기 때문입니다.