CSR, SSG, ISR, SSR 이것 뭐예요?

넥스트를 공부하기로 한 나. . .

어렴풋이 알고있던 SSR CSR SSG ISR 과 마주하다 

이것 뭐예요 ? 

 

CSR client side rendering 

렌더링하는 주체자가 클라이언트(브라우저) 

웹사이트에 접속시 서버에게 요청 보냄 -> 서버가 텅텅빈 html보내줌-> js 다 다운받아야 볼 수 있음 

주로 리액트에 사용한다! 

장점	단점
한번 로딩되면 빠른 ux 제공	페이지 로딩시간(ttv)이 길다
서버의 부하가 작음	자바스크립트 활성화 필수
	seo 최적화가 힘들고, 보안에 취약하다
	CDN에 캐시가 안됨

 

 

SSG staric site generation 

렌더링하는 주체자가 서버, 언제 렌더링 되나요? 빌드할때 됩니다!

웹사이트 접속시 정적인 HTML 파일 받아옴(프리렌더링) -> 사용자 즉각 볼수 있음 -> 사용은 ㄴ  -> 소스, 라이브러리 모두 다운시 사용ㅐㅋ

장점	단점
페이지 로딩시간이 빠름	데이터가 정적
자바스크립트 필요없음, 보안이 뛰어남	사용자별 정보제공의 어려움
seo 최적화 좋음
CDN에 캐시가 됨

 

ISR incremental staic regeneration

렌더링 주체가 서버, 언제 렌더링 되나요? 주기적으로 됩니다! 

장점	단점
ssg장점+ 데이터가 주기적으로 업뎃	실시간 데이터 아님, 사용자별 정보제공의 어려움

 

SSR server side rendering 

렌더링 하는 주체가 서버, 언제 렌더링 되나요? 요청시 됩니다!

주로 넥스트 

장점	단점
ssg장점+ 실시간 데이터 사용	비교적 느릴 수 있음
사용자별 필요한 데이터를 사용함	서버의 과부하가 걸릴 수 있음
	CDN에 캐시가 안됨