SPA 개요

Traditional Web Application

패스트 캠퍼스 강의 중 사진 발췌

클라이언트에서 최초 페이지를 요청하면 서버가 요청한 페이지에 해당하는 html을 클라이언트에게 보내주는 방식이다.

클라이언트가 about이라는 새로운 페이지를 요청하면 서버는 이에 해당하는 html 파일을 클라이언트에게 보내준다.

SPA (Single Page Application)

패스트 캠퍼스 강의 중 사진 발췌

클라이언트가 최초의 페이지를 요청하면 서버는 해당하는 html 파일을 보내주는 것까지는 위와 동일하다.

클라이언트가 about 페이지에 접속하게 되면 SPA는 별도의 페이지를 요청하는 것이 아닌 about 페이지에서 기존(최초)의 페이지와 다른 부분을 서버에 요청한다. 이것을 AJAX 요청이라고 한다.
서버는 클라이언트에게 여러가지 데이터를 내어줄 수 있겠고, 클라이언트의 컴퓨터에서는 처음에 떴던 최초 페이지에서 about 페이지로 달라졌을 때 새롭게 랜더링을 해야 하는 데이터들만 다시 화면에 그려준다.
따라서 페이지 로드 없이 콘텐츠만 새로고침 된다.

SPA는 전통적인 web 애플리케이션과 다르게 페이지가 변경되더라도 동일한 컨텐츠는 다시 불러 올 필요가 없다는 장점이 있다.

• 빠르고 자연스러운 전환으로 훌륭한 사용자 경험 제공
• 서버에 더 적게 요청해 빠르게 랜더링 가능
• 컴포넌트 단위 개발로 생산성 향상
• 쉬운 분업화

SPA 단점

• 최초 페이지 로드 느림
  단 하나의 페이지(index.html)만 사용하기 때문에 가져와야 할 데이터가 많아서, 최초 로드가 느리다.
  ⇒ Lazy loading(사용자에게 당장 보이는 페이지 먼저 로딩), 브라우저 캐싱(필요한 부분을 저장후, 사용자에게 추후에 보여줌)

• 어려운 검색 엔진 최적화(SEO)
  세부적으로 분리된 페이지에 대한 상세 내용을 검색엔진이 가져가기에는 구조적으로 조금 문제가 있다.
  ⇒ SSR(Server Side Randering이 가능한 방식으로 수정/보완), Serverless Functions을 사용하여 보완

• 모든 데이터 노출
  모든 파일이 사용자에게 넘어가지기 때문에 중요 내용 또한 넘어가게 된다.
  ⇒ 비즈니스 로직 최소화 (최대한 프론트엔드에서 비즈니스 로직을 작성하지 않도록 주의해야 함)