[Next] CSR SSR RSI SSG 장단점
CSR(Client Side Rendering)
장점
- 한 번 로딩 되는데는 시간이 걸리지만, 그 이후 필요한 부분만 변경할 수 있어 빠른 UX를 제공
- 서버가 하는 일이 적어 상대적으로 서버에 부하가 적음
단점
- 페이지 로딩 시간(Time To View)이 길어 사용자가 처음 화면을 마주하는 데(First Contentful Paint)까지 오래 걸림
- 웹에서 JS 활성화가 필수
- HTML을 받아오는 게 아닌 JS로 페이지를 보여주기 때문에 SEO 최적화가 어려움
- 중요한 정보도 클라이언트로 가야해서 보안에 취약
- CDN(Content Delivery Netword) 캐시가 안 됨
- 서울에서 부산에 있는 데이터를 매번 받아오기 어려워 대전에 따로 서버를 둠
- 부산에 요청하기 전 먼저 대전에 요청하고 없으면 대전이 부산에서 받아오고 서울에 전달
- 그 이후 서울에서 부산 거를 요청하면 대전에서 캐싱해둔 데이터를 전달
- CSR은 HTML이 비어있어 캐싱이 어려움
- JS를 캐싱하는 방법도 있지만 기본적으로 CDN이 어려움
SSG(Static Site Generation)
빌드할 때만 렌더링
장점
- 정적인 페이지를 빌드할 때 렌더링 해 둬 TTV가 빠름
- JS 활성화 필요 없음(정적인 사이트)
- SEO 최적화 좋음(HTML을 만들어서 가져옴)
- 보안이 뛰어남(서버에서 렌더링)
- CDN 캐시 가능
단점
ISR(Incremental Static Regeneration)
주기적으로 렌더링
장점
- SSG와 동일한 장점
- 데이터가 주기적으로 업데이트 됨
단점
- 업데이트를 한다고 하지만 실시간 데이터는 아님
- 사용자별 정보 제공이 어려움
SSR(Server Side Rendering)
클라이언트에서 요청이 있을 때마다 렌더링
장점
- 정적인 페이지를 빌드할 때 렌더링 해 둬 TTV가 빠름
- JS 활성화 필요 없음(정적인 사이트)
- SEO 최적화 좋음(HTML을 만들어서 가져옴)
- 보안이 뛰어남(서버에서 렌더링)
- 실시간 데이터를 사용
- 사용자별 필요한 데이터를 사용
단점
- SSG ISR에 비해 느릴 수 있음(미리 만들어 두는 게 아니라서)
- 서버에 과부하가 걸릴 수 있음
- 요청할 때마다 페이지를 만드니까 CDN 캐시가 안 됨