PEMPA (Progressively Enhanced Multi-Page Apps)

ref https://www.epicweb.dev/the-webs-next-transition

• 여러개의 HTML 페이지로 구성된 전통적인 MPA 구조를 가지면서도, 각 페이지가 기본 기능을 제공하여 점진적으로 향상된 기능을 추가하는 방식

• 유저가 해당 페이지에 진입하면, 처음 처리 방식은 MPA와 동일하다.
• 하지만 PEMPA 는 클라이언트 사이드의 자바스크립트 코드 역시 실행한다. (script 태그)

작동방식

1. 기본 MPA 아키텍쳐
   • 각 페이지는 서버에서 개별적으로 렌덜잏나다.
   • 사용자가 새로운 페이지로 이동할 때 마다 전체 페이지가 새로 로드된다.
   • 각 요청에 대해, 서버가 HTML 을 생성하고 반환한다.
2. 점진적 향상
   • 클라이언트 측에서 자바스크립트를 사용하여 페이지 간의 전환을 부드럽게한다.
   • 자바스크립트는 페이지 로드 후 추가기능을 제공하며, 페이지간 전환 시 전체페이지를 새로고침 하지 않고 필요한 데이터만 로드한다.
3. 페이지 전환
   • 페이지 링크를 클릭하면, 기본적으로 서버 요청을 통해서 페이지가 전환된다.
   • 그러나, 자바스크립트가 활성화 된 경우, 링크 클릭 이벤트를 가로채서(기본동작 방지) ajax 요청을 사용해 필요한 데이터를 서버에서 가온다.
   • 서버는 필요한 데이터를 JSON 형태로 반환하며, 클라이언트 측 자바스크립트가 이를 사용하여 데이터의 특정부분만 업데이트한다.

장/단점

1. 기본동작 방지

• 라우팅과 폼 제출에 있어서 기존의 브라우저만큼 잘하지 못함
• 페이지의 데이터를 최신으로 유지하는 것에 대해서 제어필요.
• 또한, race condition, form 중복 제출, 오류 처리 등 버그가 많을 수 있음.

2. 커스텀 코드

• 관리해야할 코드가 많아졌다.
• 서버사이드렌더링 측 + 클라이언트 측 모두 관리 필요

3. 코드 중복

• 렌더링 로직에 대한 코드 중복이 많다.
• 서버와 클라이언트 간의 렌더링 관련 코드가 동일해야하는데, 중복되어버림