Next Deploying

Next의 App router는 2가지 배포 모드가 있다.
기본적으로는 Dynamic Mode이고 Static Mode는 따로 설정을 해주어야 한다.

과거의 Page Router 시절에는 ISR(Incremental Static Regeneration) 모드도 있었다.

Static Mode(SSG)

말 그대로 정적인 사이트를 의미한다.
이전에는 SSG(Static Stie Generation)라는 용어로 불렸다.
Next의 서버가 없이 HTML 페이지로만 구성된 사이트로 빌드된다.

즉, 사이트의 특징에 따라 선택한다.

블로그나 뉴스 사이트 같이 새로운 게시글이 주로 올라오고 수정이 잘 안되는 경우에는 Static Mode로 배포한다.

적용 방법

// next.config.js
const nextConfig = {
  output: 'export', // Static Mode 적용
}
 
module.exports = nextConfig

Static Mode 제약사항

Static Mode에서는 서버를 사용하지 않기 때문에 제약사항이 있는데,
대표적으로 아래와 같은 기능들을 사용할 수 없다.

ISR 모드

SSG(Static Site Generation)모드에서는 매번 새로운 컨텐츠가 생길 때마다 다시 전체를 빌드해야 하는 과정이 번거롭기 때문에 서버 하나를 추가적으로 두고 ISR(Incremetal Static Regeneration) 모드를 적용해 일정 주기로 새로운 컨텐츠가 있는지, 기존의 컨텐츠가 수정된게 있는지
주기적으로 검사해서 그때마다 HTML을 다시 만들거나 새로 추가되게끔 했었다.

App Router로 업데이트 되면서 Next의 캐시 전략과 함께 ISR 모드의 개념이 합쳐졌고, 이는 다이나믹 모드에서만 활성화된다.

Full Route Caching로 구현 가능하다.

빌드하기

npm run build 
# or yarn
yarn build

위 명령어를 통해 빌드하면, 다음과 같이 터미널에 표기된다.

빌드하고나면 파일의 크기를 확인할 수 있고, 각각의 페이지에 방문했을 때 JS파일을 얼마나 다운받는지 표시된다.

일반적으로 300KB보다 작아야 빠르게 로딩된다.

(Static) 옆에 표시된 기호가 Static 페이지를 의미하고,
(Dynamic) 옆에 표시된 기호가 Dynamic 페이지를 의미한다

위를 예시로 보면 "/"는 Dynamic 페이지이고, "/_not-found"는 Static 페이지이다.

배포한 사이트 실행

npm start
# or yarn
yarn start

참고
Next + React Query로 SNS 서비스 만들기
Building Your Application: Deploying | Next.js