[NextJs] CSR , SSG , SSR , ISR 이론 정리

※ CSR (Client Side Rendering)

- 초기에 빈 HTML 파일을 가져오고 화면에 출력 될 모든 정보데이터를 Chunk단위로 구성된 파일을 모두 가져옴

장점 : 같은 페이지 안에서 서로 다른 컨텐츠를 실시간으로 변경 하면서 출력 하므로 동적인 컨텐츠 화면 변경이 자유롭고 페이지간 로딩이 없음 (사용성좋음)
단점 : 한번에 모든 데이터를 불러와야 되기 때문에 초기 로딩속도가 SSR 방식에 비해선 느림, 검색엔진에 비 최적화

 

※ SSG (Static-Site-Generation)

- Next프로젝트를 빌드시 pre-render

장점 : 미리빌드 시점에 페이지가 완성되기 때문에 초기 로딩속도가 빠름
단점 : 요청 전에 미리 프리렌더되기 때문에 정적인 페이지만 적용 가능 

※ SSR (Server Side Randering)

- 서버에 요청이 들어오면 서버단에서 data-fetching후 pre-render

장점 : CSR방식에 비해서는 초기로딩속도가 빠르고 요청시마다 새로운 데이터 갱신 가능
단점 : 서버 호출시에 pre-render 되기 때문에 SSG 방식보다는 느림

 

※ ISR (Incremental Static Regeneration)

- Next 프로젝트 빌드 시 pre-render

장점 
1) SSG와 마찬가지로 빌드시에 미리 페이지가 만들어지기 때문에 초기로딩속도가 빠름
2) 일정시간마다 새롭게 갠신된 데이터로 정기적으로 revalidation 처리

단점
초기에 이동할 떄만 조금 시간이 걸린다. (기존에 있는 SSR보다는 빠름)