SPA

Single Page Application

• SPA란?

  • 말 그대로 단일페이지로 구성된 웹 어플리케이션

    • MPA(Multi Page Application)의 반대

    • 과거 서버가 수행하던 렌더링을 브라우저에서 처리한다.

      화면 구성에 필요한 모든 html을 클라이언트가 가지고 있고, 서버로부터 필요한 데이터를 JSON의 형태로 받아온다.

    • 최초 페이지 렌더링 이후, 변경되는 데이터만 서버에서 받아온다.

    • 주로 CSR 방식으로 렌더링 된다

• 장점

  1. 뛰어난 UX

  2. 필요한 부분만 요청하기 때문에 화면 전환시, 빠른 렌더링 가능

  3. 서버가 할 화면구성을 클라이언트에서 수행하여 서버 부담 경감

• 단점

  1. 최초 모든 리소스를 받아와 렌더링 하기 때문에 초기 렌더링이 느리다. 2. 어려운 SEO

클라이언트에서 자바스크립트로 렌더링 하기 때문에 자바스크립트를 읽지 못하는 검색엔진에 대하여 크롤링이 어렵다.

• SEO에 대한 해결책

  • SSR 사용 (추후 포스팅에서 자세히 다룰 예정)

    SSR : ServerSide Rendering의 약자로 서버에서 html, css, js등 모든 요소를 받아와서 렌더링 하는 방식

• SPA 프레임 워크

1. React

   • 가장 높은 점유율을 가진 프레임워크 (라이브러리)

   • 큰 생태계에서 오는 다양한 도구와 레퍼런스

   • 손쉬운 컴포넌트 재사용

   • 높은 자유도 (협업간의 규약 필요)

2. Vue

   • 리액트에 비해 낮은 러닝커브

   • "프레임워크"이기 때문에 협업시 용이 (리액트에 비해 낮은 자유도) => 개발 속도 단축

3. Angular (추후에 직접 사용해 볼 예정)