nextJs - Static Generation, Server-side Rendering

 

해당 포스팅은 얕게 Static Generation, Server-Side Rendering을 설명한다.

ssr의 경우 세부 내용들이 더 복잡하게 있으니, 해당 포스팅 외에 공식문서를 읽기를 권한다.

 

Static Generation :

csr을 사용하는 spa와 달리,

Next.js는 기본적으로 모든 페이지를 미리 랜더링 해놓는다.

클라이언트에서 페이지를 구성하는 react코드가 미리 실행된다고 생각해도 된다.

이후, HTML은 인터렉티브에 필요한 자바스크립트 코드와 연결된다.(최소한의)

해당 과정을 hydration 이라고 한다.

 

1. 먼저 HTML을 랜더링해놓음.

2. 인터렉티브 요소가 있는경우 js 로드가 된 시점에서 인터렉티브(대화형)이 됨. (hydration)

 

 

 

Server-Side Rendering :

모든 페이지가 정적으로 생성하여 제공할 수 있는 것은 아니다.

모든 요청에 대해서 데이터를 최신상태를 유지해야하는 경우에는 요청이 발생한 시점으로부터

서버에서 랜더링을 하여, 유저에게 응답한다.

 

1. 사용자에게  page request 요청을 받는다.

2. Next.js는 해당 페이지가 ssr 페이지임을 알고 있고, Server-Side Rendering 작업하여 페이지를 생성. 사용자에 요청에 응답한다.