FrontEnd - SPA (Single Page Application)

개요

회사에서 새로운 프로젝트에 투입되어 Vue와 같은 SPA에 대해 공부할 필요성이 생겨 공부한 내용을 작성하려 한다.
개념적인 부분만 다루기 때문에 SEO나 Next.js, Nuxt.js 등과 같은 언어적인 부분은 다루지 않고 개념만 짚어보려 한다.

MPA(Multi Page Application)

글의 주제는 SPA지만 SPA를 알기 위해서는 먼저 MPA부터 알아야 한다고 생각하기 때문에 MPA부터 간단하게 설명하려 한다.
MPA는 우리가 보통 생각하는 MVC 방식을 떠올리면 된다.
사용자가 웹 페이지를 이동할 때(새로운 페이지를 요청할 때 혹은 새로고침) 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드 되어 사용자에게 보여준다.
MPA는 Server Side Rendering 방식으로 사용자에게 화면을 출력하는데(Ajax를 통해 CSR을 할 수도 있긴 하다.), Server Side Rendering은 말 그대로 Server에서 렌더링하여 사용자에게 화면을 출력한다.

가벼운 예로 SSR을 설명하기 위해 어떤 게시판에 작성된 글을 조회하는 웹 페이지에 접속했다고 가정하자

• 클라이언트가 https://www.도메인.com/게시판/글번호 접속(서버에 요청)
• 서버는 URL에 매핑된 코드를 실행 (아래는 코드 내용)
  • 글번호를 통해 DB에 Query를 날려 내용 조회
  • 정적 리소스 파일에 데이터 바인딩
  • 이하 과정을 거쳐 렌더링 완료
• 응답하여 렌더링이 완료된 HTML, CSS, JavaScript를 클라이언트에 전송
• 클라이언트는 정적 리소스를 다운로드 받아 화면에 출력

MPA는 보통 위 과정을 페이지 이동시마다 반복하기 때문에 페이지 이동시 모든 화면이 깜빡거리는 UX를 제공하며 서버에서 렌더링 하고 응답하기 때문에 서버에 부하가 커지는 단점이 있다.

SPA (Single Page Application)

SPA는 말 그대로 클라이언트가 도메인에 접속하면 하나의 페이지 와 필요한 리소스들을 모두 서버에서 다운로드 하여 화면을 보여준다.
첫 요청시 딱 한 페이지만 요청하고, 화면이 변경될 때는 기존 페이지를 수정해서 보여주는 방식이다. 즉, 최초 페이지 로딩 후 필요한 부분만 서버에 요청 후 응답을 받고 화면을 갱신해서 사용자에게 보여준다.
보통 SPA는 CSR 방식으로 화면을 렌더링하는데 CSR(Client Side Rendering)은 최초 페이지 로딩 후 페이지 이동 시 필요한 데이터 를 서버에 요청하여 화면을 재구성하는 방식이다.
(SPA도 SSR 방식으로 렌더링을 할 수도 있다고 하지만, 밀접한 것은 CSR이기 때문에 위와 같이 표현)

CSR도 마찬가지로 가벼운 예를 들어 설명하면 아래의 과정을 거친다

• 클라이언트가 최초 https://www.도메인.com/ 접속
• 서버는 클라이언트에 웹 페이지를 렌더링 할 수 있는 모든 리소스를 전송
• 최초 접속한 https://www.도메인.com/을 클라이언트 측에서 렌더링하여 제공
• 클라이언트가 https://www.도메인.com/게시판 이동
• JavaScript를 통해 선언된 함수 reuqest_question_board() 를 실행
  • reuqest_question_board()는 해당 페이지에 필요한 데이터들을 서버에 요청하는 함수
• 구현한 함수 코드를 거쳐 서버에서 필요한 데이터만 을 응답
• 클라이언트는 응답 받은 데이터를 통해 화면 렌더링

CSR은 화면을 렌더링 할 때 즉, 기존 화면에서 새로운 화면을 구성할 때 기존 화면을 지우고 새로운 화면을 렌더링 하는 방식이라고 이해하면 이해가 쉬울 거 같다.
그렇기 때문에 UX 관점에서 더 자연스럽고 깔끔하게 느껴지고 필요한 리소스만 부분적으로 로딩하고, 로딩 후 캐시에 저장하기 때문에 서버의 부하를 줄여 성능적으로 더 우수하다.
개발자 관점에서는 컴포넌트별로 개발하기 때문에 생산성이 더 좋기도 하지만, 아래와 같은 단점이 있다.

• 최초 로딩시 모든 리소스를 다운로드 받기 때문에 초기 구동 속도가 느리다.
  • 코드 스플리팅(Code Spliting)이나 지연 로딩(Lazy Loading)을 통해 해결할 수 있다.
    • 코드 스플리팅(Code Spliting)은 SPA에서 필요한 JavaScript를 하나의 번들로 묶는 것이 아니라 여러 개의 작은 번들로 나눠 해당 페이지로 이동할 때 해당 페이지에 필요한 JavsScript만 다운로드 하여 로딩 속도 개선이 가능하다.
    • Webpack을 통해 구현
  • 지연 로딩(Lazy Loading)
    • 코드 스플리팅과 유사하지만 지연 로딩은 JavaScript를 특정 시점까지 다운로드 하지 않다가 클라이언트가 해당 기능이나, 페이지를 요청할 때 리소스를 다운로드 받는다.
  • 요약하면, 코드 스플리팅은 웹 애플리케이션의 JavaScript 코드를 작은 번들로 나누어서 필요한 부분만 다운로드하는 기술이고, 지연 로딩은 사용자가 요청할 때 리소스를 다운로드하는 기술이다.