✏️ Next.js의 SSG/ISR/SSG/CSR

 

 

자바스크립트 다운로드 후 -> 브라우저에서 자바스크립트가 실행되어야 ui가 실행한다.

클라이언트쪽에 랜더링된다고해서 CSR이라고 한다.

자바스크립트가 작동안하면 로봇검색엔진이 검색이 안된다는 치명적인 단점이 있다.

그 외에도 자바스크립트를 다운로드받을때까지 화면이 실행되지 않는다.

 

 

 

SSR

서버쪽에서 자바스크립트가 실행됨 -> 완성된 html이 전송된다.

자바스크립트를 실행할 수 없는 환경에서도 잘 동작함. 검색엔진에도 친화적임

next.js는 백엔드까지 동시에 제공하는 풀스택 프레임워크이다.

 

 

 

 

SSG(Static Site Generation)

SSG는 빌드타임(build-time) 때만 컴포넌트를 생성하고, 이후는 변하지 않는 페이지로 가정

static 컴포넌트를 제공하는 것을 말합니다. 그리고 Next.js는 아-무것도 하지 않으면 기본적으로 SSG로 동작

 

 

ISR(Incremental Site Regeneration)

ISR은 빌드타임(build-time) 때 컴포넌트를 초기 생성

이후는 일정 주기마다 변화를 적용하여 컴포넌트를 제공하는 것

 

 

SSR(Server Side Rendering)

fetch한 데이터는 실시간으로 계속 바뀜.

컴포넌트 요청이 있을 때 마다 데이터를 갱신해서 최신 데이터만 제공.

SSR은 빌드타임(build-time) 때 컴포넌트를 초기 생성하고,

이후 컴포넌트 요청이 있을 때 마다 변화를 적용하여 가장 최신의 데이터를 user에게 제공

 

 

CSR(Client Side Rendering)

fetch한 데이터는 실시간으로 계속 바뀜

컴포넌트 요청이 있을 때 마다 데이터를 갱신해서 최신 데이터만 제공

CSR은 빌드타임에 컴포넌트를 초기 생성하진 않고

Javascript로 이루어진 리액트 파일을 다운로드 받고 그제서야 화면이 그려지게 됨