[Next.js] CSR SSR SSG 차이 정리

CSR

클라이언트 사이드 렌더링
서버에 요청하면 html과 js를 받아 클라이언트 측에서 렌더링한다 (다운받는 동안 페이지는 비어있다)
초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전제적인 페이지 완료 시점은 SSR보다 느려진다
클라이언트에서 그려주므로 서버 부하가 상대적으로 적다

SSR

서버사이드 렌더링
서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다
페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라짐
더불어 SEO(search engine optimization) 또한 쉽게 구성
서버에서 렌더링 가능한 html인 상태로 만들어 오기 때문에 자바스크립트 로딩 완료 전에 미리 페이지의 내용을 보고 기다릴 수 있다

SSG

정적 사이트 생성
빌드 시점에 정적 페이지를 생성하고 이후 요청에 따라 미리 생성한 정적 페이지를 제공한다
(왜 이런 기능이 생겼을까? 매번 요청을 받아 서버에서 화면을 그려주는 건 부담이 됨)

(그럼 새롭게 내용이 업로드 되면 재빌드를 해야하지 않나? => 자동으로 재빌드 해주는 기술이 있다!)

---

※ 

정적 페이지와 동적 페이지의 차이점

가장 큰 차이는 정적 페이지는 백엔드를 타지 않는다는 것이다

고정된 내용의 html문서라고 할 수 있다.

 

 

https://proglish.tistory.com/216

SSR과 CSR의 차이