Rendering

JavaScript를 이용해 HTML을 만드는 행위
기존 SPA를 만들 떄 사용하던 CSR(Client-side-rendering)에서의 Rendering 표현에 가깝다.

Pre-rendering

Client에 HTML이 이미 로드가 된 이후가 아닌, 이전에 JavaScript를 이용해 HTML을 만드는것
언제 HTML을 만드느냐에 따라, Server-Side Rendering(SSR)과 Static-Site generation(SSG)으로 나뉨

Next.js는 기본적으로 모든 코드가 Pre-rendering 된다.

• Build시 rendering => SSG
• runtime에 rendering => SSR

CSR vs SSR vs SSG vs ISR

• CSR (Client-Side-Rendering)

브라우저에서 HTML을 로드하면 JavaScript를 이용해 rendering하는 방식

• SSR (Server-Side-Rendering)

브라우저에서 해당페이지를 접속하면 그 떄 서버에서 HTML을 렌더링해서 전달하는 방식 페이지를 요청할 때마다 렌더링하기 때문에 오래걸림

• SSG (Static-Site-Generation)

SSR의 경우 페이지를 요청할 때마다 서버에서 렌더링을 한다. 정적인 페이지를 제공할때는 그럴 필요 없이 빌드할 때 렌더링하고 페이지를 요청할 때 이미 렌더링 된 페이지를 반환

• ISR (Incremental Static Regeneration)

SSG는 컨텐츠가 업데이트 될때 제대로 된 정보를 보여줄 수 없다. 이를 보완하기 위해 일정 주기마다 페이지를 빌드시켜주는 ISR이라는 방식이 있다.