3세대
- SPA: 하나의 파일로 전체 사이트를 구현
- 프론트엔드와 백엔드가 나눠지기 시작 또는 나뉘게 되는 시점
- html 태그 자체를 자바스크립트가 동적으로 생성
- react를 사용하기 시작함
** SPA(결과물) / CSR, SSR (렌더링 방법)로 나누어 이해하면 좋음
SPA (Single PAge Application, 단일 페이지 애플리케이션)
- 페이지가 한 개인 애플리케이션 (html 파일이 한개)
- 사용자가 웹 애플리케이션과 상호작용하는 방식을 획기적으로 바꾼 기술
- 동적으로 화면을 바꿔가며 표현하는 것
- SPA -> CSR
- MPA -> SSR
장점
- 자연스러운 UX
-> 전체 페이지를 업데이트 할 필요가 없기때문에 빠르고 깜빡거림이 없다. - 필요한 리소스만 부분적으로 로딩(성능)
-> SPA의 Application은 서버에게 정적리소스를 한번만 요청한다. 그리고 받은데 이터는 모두 저장한다(캐시Cache) - 서버의 템플릿 연산을 클라이언트로 분산(성능)
- 컴포넌트별 개발 용이(생산성)
- 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능(생산성)
단점
- js파일을 한 번에 받기 때문에, 초기 구동 속도가 느리다.
-> 코드 스플리팅으로 개선 가능 - 검색엔진최적화(SEO)가 어렵다.
-> SSR으로 해결가능 - 보안 이슈
-> 프론트엔드에 비즈니스로직 최소화로 해결가능
:D