[next.js]렌더링 패턴

SSG : 서버에서 미리 페이지를 생성하여 정적 html로 저장하고, 클라이언트가 요청시 즉시 반환

=>14버전에선 디폴트(안적거나) 또는 cache:"force-cache" 

=>yarn build시 ssg페이지는 ㅇ static으로 표현됨

 

SSR : 클라이언트가 요청할때마다 서버에서 html을 생성하여 반환

=>cache:"no-store" : yarn build시 ssr페이지는 f dynamic으로 표현됨

 

CSR  : 클라이언트에서 js를 사용해 UI를 생성하고 렌더링

=>리액트 훅 사용

=>"use client" 사용

 

ISR : SSG와 유사하게 미리 페이지를 생성하지만, revalidate 주기에 따라 서버에서 페이지를 다시 생성하여 최신 데이터를 제공

=>next:{revalidate:다시 생성할 시간}