[Next.js] 빌드하기

빌드 명령어

# npm
npm run build

# yarn
yarn build

#pnpm
pnpm build

 

Static rendering & Dynamic rendering

next.js 프로젝트를 빌드를 실행하면 터미널에 아래와 같은 결과들을 확인할 수 있습니다.

 

여기서 Route 경로 맨 앞에 기호의 의미는 아래와 같습니다

동그라미 기호는 Static rendering을 의미합니다.

 

람다 기호는 Dynamic rendering을 의미합니다.

 

Static rendering

• Static rendering 페이지는 ‘npm run build’ 할 때 만든 html 페이지를 그대로 유저에게 보내줍니다.
• 페이지안에 별 기능이 없습니다.
• 미리 페이지 완성본을 만들어놨기 때문에 전송이 매우 빠릅니다.

Dynamic rendering

• Dynamic rendering 페이지는 유저가 페이지에 접속할 때마다 html을 새로 만들어서 보내줍니다.
• 페이지에서 ‘fetch()’등을 사용하면 자동으로 Next.js가 자동으로 Dynamic rendering 해줍니다.

 

빌드할 때 주의할 점

빌드 내역을 자세히 보면 분명 ‘fetch()’를 사용해서 DB로부터 데이터를 받아오는 페이지인 list 페이지가 Static rendering 페이지로 생성된 것을 볼 수 있습니다.

 

이렇게 되면 새로운 글이 생성된다 하더라도 Static rendering 페이지는 빌드 당시에 생성된 html 파일을 계속 사용하기 때문에 생성된 새로운 글들이 list 페이지에서 보이지 않을 것입니다.

 

이런 경우에는 직접 Dynamic rendering으로 바꿔줘야 합니다.

반드시 해당 페이지를 Dynamic rendering 방식으로 사용하고 싶을 때는 아래의 코드를 상단에 작성하면 됩니다.

// dynamic rendering 방식으로 사용하고 싶다면
export const dynamic = 'force-dynamic';

// static rendering 방식으로 사용하고 싶다면
export const dynamic = 'force-static';

export default async function List() {
... 생략