- 학습 목표 1. MPA와 SPA
여러 개의 HTML 페이지로 구성된 애플리케이션 SSR 방식으로 렌더링 된다.
-
장점
- 초기 로딩이 빠르다.
- SEO 최적화에 유리하다.
- 서버에서 데이터를 미리 렌더링 해주기 때문에 보안이 좋다.
-
단점
- 페이지 이동마다 새로고침이 발생 → 서버 부하 크다.
- 프론트/백 코드가 밀접하게 연결되어 있다.
- UX 저하될 수 있다.
-
사용 사례
-
매우 큰 전자 상거래 사이트
- Amazon : 제품이나 카테고리 페이지 → 아마존이 보유한 다량의 제품 데이터를 빠르고 정확하게 보여주기 위해
-
하나의 HTML 페이지로 실행되는 애플리케이션 CSR 방식으로 렌더링 된다.
-
장점
- 빠른 페이지 전환 및 반응성
- 초기 로딩를 제외하면 서버 부하 적음
- 프론트/백 명확한 분리
- 개발 및 디버깅에 용이
-
단점
- 초기 로딩 시간 길다.
- SEO 최적화에 어렵다.
- 브라우저의 JS가 비활성화되면 작동 안 함
-
사용 사례
- Gmail
- GitHub → 페이지 전환 없이 동적으로 콘텐츠를 업데이트
SPA의 동적 장점을 유지하면서도 초기 로딩 성능과 SEO를 개선할 수 있다.
프레임워크
- React → Next.js
- Vue → Nuxt.js
동작 방식
서버에서 **HTML을 미리 렌더링(SSR)**하고, 그 이후 클라이언트에서 React or Vue 애플리케이션이 동작 (SPA)
SPA + SSR 의 장점
- SEO 최적화: SSR을 사용하면 서버에서 미리 렌더링된 HTML을 제공하므로, 검색 엔진 크롤러가 콘텐츠를 쉽게 인식할 수 있어 SEO가 유리하다.
- 빠른 초기 로딩: 서버에서 미리 HTML을 렌더링해 전달하기 때문에, 클라이언트에서 페이지를 로드할 때 시간이 적게 걸리고 특히 첫 페이지 로딩이 빠르다.
- 클라이언트 측 인터랙티브성: 페이지가 로드된 후에는 SPA처럼 동작하여 빠른 사용자 상호작용이 가능합니다. 페이지를 새로 고침하지 않고도, 데이터를 불러오거나 화면을 업데이트할 수 있습니다.
- 커뮤니티 과제 DELETE Status Code 구체화하기
- 커뮤니티 과제 댓글 데이터 페이징하기
- 오늘은 jeff에게 엄청나게 정성스러운 코드 리뷰를 받았다. 스스로 부족한 점과 놓치고 있는 점을 알 수 있어서 좋았다. 그리고 더 열심히 해야겠다는 다짐을 했다. 🔥