[Next.js] static rendering dynamic rendering 차이점과 변경하는 방법

정적 렌더링 (Static Rendering)

서버 측에서 미리 페이지를 생성하고, 생성된 페이지를 클라이언트에게 전달하는 방식

이는 주로 페이지의 내용이 변경되지 않거나 변경 빈도가 낮은 경우에 적합

정적 렌더링은 성능이 우수하고 검색 엔진 최적화(SEO)에 유리한 특징을 가지고 있음

주요 특징

• 미리 페이지 생성: 서버에서 페이지를 사전에 생성하여 클라이언트에게 전달
• 초기 로딩 속도 향상: 생성된 페이지를 바로 제공하기 때문에 초기 로딩이 빠름
• 검색 엔진 최적화: 정적으로 생성된 페이지는 검색 엔진에 노출되기 좋음

 

동적 렌더링 (Dynamic Rendering)

동적 렌더링은 요청마다 페이지를 동적으로 생성하는 방식

이는 페이지의 내용이 자주 변경되거나 사용자의 상호작용에 따라 다양한 내용을 보여줘야 할 때 적합

동적 렌더링은 서버 측에서 페이지를 생성하지만, 요청 시에 데이터를 가져와서 렌더링하는 방식

주요 특징

요청마다 페이지 생성: 각 요청에 따라 페이지를 동적으로 생성

실시간 업데이트: 데이터 변경에 따라 실시간으로 페이지를 업데이트

유연한 내용 변경: 사용자에게 다양한 컨텐츠를 보여줄 수 있음

 

next.js에서 static rendering / dynamic rendering 확인하는 방법

터미널 열어서 npm run build를 하면

왼쪽에 O 표시가 된 파일이 정적 렌더링되는 파일이고, λ 표시가 된 파일이 동적 렌더링 파일이다.

아래 파일들은 모두 동적 렌더링으로 페이지를 보여준다.

• fetch('/URL', { cache: 'no-store' }) 로 데이터 가져오는 문법 
• useSearchParams(), cookies(), headers() 
• dynamic route

 

next.js에서 static rendering / dynamic rendering 변경하는 방법

코드 상단에 아래 코드를 붙여넣으면 각각의 방식으로 변경 가능하다.

// 동적 렌더링 방식으로 변경
export const dynamic = 'force-dynamic' 

// 정적 렌더링 방식으로 변경
export const static = 'force-static'