출처
웹 애플리케이션의 역사
1. 신문처럼 텍스트 중심의 문서
2. MPA(Multi Page Application)
다중 페이지로 구성 -> 변경사항 있을 때마다, 매번 서버로 페이지 요청
</BLINK>페이지 이동시, 서버로부터 html파일을 내려받기 때문에 BLINK처럼 계속해서 새로고침이 생김(깜빡깜빡)
추가로 사진, 영상, 인터랙션이 생김 -> 복잡도 증가 -> 성능이슈 발생
3. MPA처럼 전체 화면을 계속해서 가져오는 문제를 해결하기 위한 ajax등장
필요한 부분만 reload
4. ajax 다음 SPA(Single Page Application) 등장
단일 페이지로 구성, 필요한 부분만 데이터 요청
UX 증가
5. MPA, SPA 정리
MPA -> SSR
SPA -> CSR
CSR SSR SSG
1. CSR SSR
Rendering을 어디에서 처리할 것인가?
2. CSR(Client Side Rendering)
첫 로딩에 빈 html 파일에 필요한 번들파일을 모두 다운
- 동작 흐름
장점 : TTFB(Time to First Byte) : 요청을 보내고 응답의 첫 번쨰 바이트가 도착하기 까지의 시간
단점 : FCP(First Contentful Paint) : 사용자가 화면에서 콘텐츠를 볼 수 있는 페이지 로드 타임라인의 첫 번째 지점
3. SSR(Server Side Rendering)
서버에서 Rendering되는 페이지를 그려 Client에게 주는 방식
SSG(Static Site Generation)이 나온 계기
요청 즉시 HTML 파일 만드는지 vs 미리 다 만들어둔 static 페이지를 제공하는지
즉, SSG는 client에게 모두 같은 content를 제공할 때
- SSR 동작 흐름
장점 : FCP(First Contentful Paint) : 위에 설명 참고
단점 : TBT(Total Blocking Time) : FCP로부터 TTI(Time To Interact)사이의 시간
TTI(Time To Interact) : 사용자가 페이지에서 상호작용이 가능하기까지의 시간
CSR SSR 장단점 비교
1. 비교
| CSR | SSR | |
|---|---|---|
| 장점 | 화면 BLINK X(UX 증가) / 초기 로딩 후 구동 속도 빠름 | 초기 로딩속도 빠름 / SEO 쉬움 |
| 단점 | 초기 로딩 속도 느림 / SEO 어려움 | 화면 BLINK O(UX 감소) / 매번 서버로 요청(과부하) |
SEO(Search Engine Optimization) : 웹사이트 검색 결과가 더 잘 보이도록 최적화 하는 과정
2. 언제 어떤 방식?
CSR : 사내에서만 쓰이는 서비스라서 SEO 불필요한 경우
SSR : 이커머스 사이트처럼 검색 유입이 중요한 경우 + 초기 로딩 속도 중요한 경우
SSG : 블로그 같은 정적 사이트
3. CSR+SSR(Universal Rendering)
초기 렌더링(SSR) + 다른 페이지 이동(CSR)
-> SSR : 초기 구동속도 빠름
-> CSR : 페이지 이동시, BLINK 없음
-> MIX :Universal Rendering
4. CSR과 SSR을 사용하는 라이브러리 & 프레임워크
