SPA (Single Page Application)
모든 정적 리소스를 최초 한 번 다운 받는 방식
새로운 페이지 요청이 들어올 때, 필요한 데이터만 다운 후 사용
장점
- 자연스러운 사용자 경험
- 클릭 시 즉각적인 반응
- 컴포넌트 개발에 용이, 재사용 가능
- 프론트엔드와 백엔드 분리
- UI는 데이터와 분리되기에 백엔드에 영향을 주지 않고 UI 개발 가능
단점
- 초기 페이지 로딩 속도가 느림
- 검색 엔진 최적화(SEO) 어려움
- Next.js 로 해결 가능
MPA (Multiple Page Application)
새로운 페이지 요청할 때마다 정적 리소스 다운
매번 새로운 리소스가 리렌더링
장점
- 초기 로딩 시간이 짧다.
- 서버에서 미리 렌더링 후 가져오기 때문에 첫 로딩 시간이 짧음
- SEO 관점에서 유리
- 유저가 보는 화면 방식이 웹 크롤러가 보는 방식과 같아 SEO에 비교적 적합
단점
- 페이지 이동시 새로고침
- 새로고침으로 화면 깜빡임
- 느린 속도
- 프론트엔드, 백엔드가 모두 필요
함께 성장하고 싶은 개발자