SPA/MPA

Single Page Application

한개의 page로 구성된 Application

웹 애플리케이션에 필요한 모든 정적 리소스(HTML, CSS, JavaScript)를 한번 다운로드 한 뒤 새로운 요청이 있을 때마다 필요한 데이터만 전달받아 렌더링한다

(주로 CSR 방식으로 렌더링한다)

• 전체 페이지를 업데이트 할 필요가 없기 때문에 비교적 빠름
• 필요한 리소스만 부분적으로 로딩해오기 때문에 성능면에서 좋음
• JavaScript 파일을 번들링 해서 한번에 받기 때문에 초기 구동 속도가 느림
• 검색 엔진 최적화가 어려움
• 클라이언트에 중요 비즈니스 로직이 노출될 수 있음

검색 엔진 최적화?

검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업

SPA는 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현하는 방식이기 때문에 자바스크립트를 읽지 못하는 검색엔진에 대해서는 크롤링이 안되어 색인이 되지 않는 문제가 발생

---

Multi Page Application

여러개의 page로 구성된 Application

새로운 페이지를 요청할 때마다 정적 리로스가 다운로드 되고 매번 전체 페이지가 다시 렌더링 된다

페이지를 이동하거나 새로고침해도 전체 페이지를 다시 렌더링 한다

(SSR 방식으로 렌더링한다)

• 검색 엔진 최적화 관점에서 유리
• 첫 로딩시간이 매우 짧음
• 모든 요청마다 새로고침 발생
• 페이지 이동시 불필요한 템플릿도 중복해서 로딩하기 때문에 성능면에서 떨어짐

---

번들링 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위