Static Rendering, Dynamic Rendering

JS/Next.js · 2024. 2. 28. 14:37
728x90

npm run build로 패키지를 빌드해주면

요렇게 라우트 빌드가 어떻게 되어있는지 왼쪽에 표시가 있는데

O 모양은 static Rendering , ㅅ 모양은 Dynamic Rendering 을 뜻한다.

static Rendering은 빌드할때 처음 데이터를 가지고 데이터를 뿌려주는데 데이터가 바뀌고 새로고침을 해도 데이터가 바뀌지않는다..

하지만 list페이지는 글이 새로 생성할때마다 데이터가 바뀌어야해서 Dynamic Rendering으로 변경해줘야하는데 그럴때 할 수 있는게

export const dynamic = "force-dynamic";

 

list 페이지에서 이걸 선언해주면 된다.

그러면 빌드할때 Dynamic Rendering으로 변경되어 빌드된다.

반대로 데이터가 전혀 변하지 않는 페이지, 데이터값이 고정된 페이지의 경우 = 고정된 상세페이지나 안내글페이지같은거는

export const dynamic = "force-static";

이렇게 선언해줘서 고정데이터 렌더링으로 빌드할 수 있다.

728x90
Copyright © Nana
levup