static rendering, dynamic rendering

next.js에는 두 가지의 렌더링 방식이 있다.

 

static rendering

- 페이지 생성 시 디폴트값

- npm run build 할 때 만든 html 페이지 그대로 유저에게 보낸다.

- 별도의 서버 기능 등이 없기 때문에 html만 보내주면 된다.

- 미리 페이지 완성본을 만들어 놓았기 때문에 전송 속도 빠르다.

 

dynamic rendering : 

- 유저가 페이지에 접속할 때마다 html을 새로 만들어서 보내준다.

- fetch('/', {cache: 'no-store'), useSearchParams(), cookies(), headers(), [dynamic route] 등을 사용할 시 자동으로 dynamic rendering 해준다.

단) 매번 html을 새로 그려야 하기 때문에 서버나 db에 부담이 클 수 있다. -> 부담을 줄이고 싶다면 caching 기능 활용하자

 

간혹 dynamic rendering 이 되어야 하는 페이지가 static rendering이 되어 있다면

dynamic 이 될 수 있도록 수정해줘야 한다.

 

렌더링 확인 방법

터미널에 npm run build 입력

o는 static rendering,

λ는 dynamic rendering

 

 

변경 방법

변경하고자 하는 페이지 상단에 아래와 같은 코드를 입력하면 된다.

 

static -> dynamic

export const dynamic = "force-dynamic";

 

dynamic -> static

export const dynamic = "force-static";

 

 

 

적용 예시

/list 페이지 dynamic rendering으로 변경 완.