Next.js - #static rendering, dynamic rendering

build 작업

Next.js로 만든 서버를 어디 배포하려면 터미널 열어서 npm run build를 먼저해야 한다
(build : 리액트 문법으로 작성한 코드들을 브라우저 친화적인 html, js, css 파일로 바꿔주는 작업)
그 다음에 npm run start 해두면 실제로 유저 요청을 처리할 수 있는 Next.js 서버가 완성된다

빌드를 하면 아래 이미지처럼 내가 만든 html page와 api가 나온다

Next.js는 두 가지 rendering 방식으로 page를 사용자에게 보여준다

• ○ : 동그라미, static rendering
• λ : 람다, dynamic rendering

어떤 식으로 렌더링을 할지는 자동으로 정해진다
페이지 내부에

• hook
• fetch('/URL', { cache: 'no-store' })(데이터 가져오는 문법)
• cookise()
• header()
• [dynamic route]

등을 사용했다면 dynamic rendering이 되고 그 외는 자동으로 static rendering이 된다

static rendering (○)

앞서 server component는 기본값이라고 했는데
build 후 생성된 html page도 기본적으로 static rendering을 한다
static rendering을 하는 html page들은 페이지 내부에 별다른 기능이 없기 때문에 html 그대로 사용자에게 보내진다
이렇게 하면 미리 페이지 완성본을 만들어놨기 때문에 전송이 빠르다는 장점이 있다

dynamic rendering (λ)

dynamic rendering을 하는 html page들은 사용자가 페이지에 접속할 때마다 html을 새로 만들어서 보낸다

static rendering / dynamic rendering 강제로 바꾸기

이미지를 봤을 때 list는 게시글을 DB에서 가져와 보여주는 페이지이고 글 작성 및 삭제 시 바로 화면에 반영돼야 하기 때문에 static rendering이면 안 된다

이럴 경우, 해당 페이지를 dynamic rendering을 하고 싶다면 아래와 같이 변수를 페이지에 추가하면 된다

export const dynamic = 'force-dynamic';

export default function 페이지(){
  ...
}

• dynamic의 종류
  • force-dynamic : dynamic rendering
  • force-static : static rendering
  • auto : 자동 (default)

배포하기 전에 npm run build 후,
페이지들을 확인을 하여 rendering 방식이 수정이 필요할 경우, 위와 같이 수정하면 된다