웹 개발 방식은 여러가지 방법이 있겠지만, 그 중에서도 모던 웹 개발방식이라 불리는
PWA, SPA 와 전통적인(?) 방식의 MPA를 공부한 글

1. PWA (Progressive Web Application)

HTML,CSS , JavaScript 같은 웹 기술로 만드는 앱이다.
실제 앱은 아니지만 웹에서 사용자로 하여금 앱처럼 느낄 수있다.
(대표적으로 트위터)

PWA는 홈 화면에 저장되면 브라우저에서 실행되며 네이티브 앱 처럼 동작한다.

매니페스트, 서비스 워커가 있고
모바일 화면에 앱처럼 추가해서 사용가능

2. SPA (Single Page Application)

1) SPA란?

SPA는 직역하면 단일 페이지 어플리케이션으로 기존의 전통적인 새로고침 방식의 웹과 달리 정적 파일을 한번에 모두 다운도르 받고(첫 로딩), 이후 사용자와의 상호작용 가운데 필요한 데이터만 서버로부터 동적으로 처리하여 트래픽의 총량을줄이고, 네이티브 앱과 유사한 사용자 경험을 제공할 수 있는 애플리케이션 형태이다

기본적으로 CSR 형식이다.

대표적으로는
네이버 바이브, 리액트 홈페이지 가 있다.

2) SPA가 나온 이유

1. 기존 MPA 방식의 새로고침 문제를 AJAX가 어느정도 해결해주었지만, 페이지 이동 시 새로고침된다는 근본적인 문제를 해결할 순 없었다.

3) SPA의 장점

1. 컴포넌트별 개발 용이(생산성)
2. UX (빠른 반응성) -> 페이지전환이 부드럽고 빠르다
   UI가 컴포넌트로 구분되어있고 컴포넌트만 바꿔주는 형식
   
3. 필요한 리소스만 부분적으로 로딩(성능) ->

4) SPA의 단점

1. 검색 엔진 최적화 어려움 (SEO)
   • SSR 방식으로 해결 가능
     (ex. react의 next.js, vue의 nuxt.js)
2. 초기 구동에 시간이 걸림

• 처음 웹페이지를 구성하는데 필요한 정적 리소스(HTML,CSS,JS)를 한번에 다 내려받기 때문
• 초기 로딩속도를 개선하기 위한 방법으로 Chunking, code splitting(WebPack) 등이 있다.
  - chunking : 초기페이지에서 모든 리소스를 다운받지 않고, 리소스를 청크 단뒤로 묶어 해당 리소스에 대한 요청이 있을때만 다운로드 받도록 하는 방법

3. 보안

3. MPA (Multiple Page Application)

1) MPA란?

여러개의 페이지로 구성된 웹 어플리케이션이다.
전통적인 웹 방식으로 기본적으로 SSR 방식이다.

2) MPA의 장점

• SEO(Search Engine Optimization) 검색엔진최적화가 빠르다.
• 서버에서 랜더링을 해 가져오기에 첫 로딩이 매우 짧다
  

3) MPA의 단점

• 페이지 이동시 새로고침된다 -> UX 저하
• 페이지 이동 시 불필요한 템플릿도 로딩 -> 성능

4. 결론

검색에 노출이 잘 되야 하는 소개 page는 기존 ssr방식으로 하고 웹 애플리케이션 구동은 CSR로 하면 되지 않을까?

첫 페이지는 서버쪽에서 준비해둔 페이지 -> 빠른속도, 크롤링 가능
그 뒤 모든페이지들은 JS

1) 우리 서비스는 ?

1. 보여줄 콘텐츠가 많은가? (쇼핑몰처럼)
2. SEO가 중요한가?
3. 사용자의 이벤트(마우스클릭 등)이 많이 일어나나?

<참고링크>
PWA는 무엇이며 왜 필요한가 - Blog

기존 웹앱 및 단일 페이지 앱 중에서 선택 -마이크로소프트