[React] SPA, CSR vs SSR, SEO
SPA
- 싱글 페이지 어플리케이션, 최초 페이지를 로딩한후 동적으로 데이터만 변경하여 컴포넌트를 바꿈
CSR
- 클라이언트 사이드 렌더링, 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 JS를 이용하여 리소스를 서버로부터 제공받고 클라이언트가 데이터를 렌더링하는 방식 => HTML을 그리는 역할을 클라이언트가 JS로 수행
장점
- 첫 로딩만 기다린다면 이후부터는 좋은 사용자 경험을 제공
- 연속된 렌더링으로 인한 과부하를 줄일 수 있음
단점
- 초기 렌더링 속도가 느림
- 검색 엔진에 잘 안뜸, 웹크롤러는 JS를 실행못하기 때문
SSR
- 서버 사이드 렌더링, 서버에서 렌더링을 수행하는 방식
장점
- 초기 렌더링 속도가 빠름
- JS를 쓴 렌더링이 아니므로 SEO(검색엔진 잘뜸)가 가능 => HTML에 모든 컨텐츠가 저장되어있음
단점
- 매범 새로운 페이지를 요청할때마다 새로고침이 발생
- 간단한 데이터 수정에도 서버를 거쳐야함, 이는 서버의 과부하의 원인이됨