[Learn Next.js] 동적 렌더링

Next.js App Router에서 선언한 컴포넌트는 기본적으로 서버 컴포넌트이며, 정적으로 렌더링됩니다.

이는 컴포넌트에서 가져온 데이터가 새로 업데이트되어도 반영되지 않는다는 것을 의미합니다.

가져온 데이터와 함께 UI가 업데이트되도록 하려면 정적으로 렌더링하지 않고, 동적으로 렌더링해야 합니다.

동적 렌더링

정적 렌더링은 빌드시 렌더링되어, 그 결과가 CDN에 캐싱됨을 의미합니다.

그러면 사용자가 서버로 요청을 보냈을때 그 요청이 CDN으로 전송되어 UI를 빠르게 받을 수 있습니다.

 

즉, 정적 렌더링과 반대로 캐싱을 비활성화하여 동적 렌더링을 수행할 수 있습니다.

캐싱을 비활성화 하면 빌드시 UI가 생성되지 않고, 서버에 요청이 전송될때 UI가 생성되어 사용자에게 전달됩니다.

이는 서버로 직접 요청을 전송하기 때문에 실시간 데이터를 요청할 수 있으며, 쿠키 및 URL 매개변수와 같이 요청 시에만 알 수 있는 정보를 사용하여 개인화된 콘텐츠를 제공할 수 있다는 장점이 존재합니다.

캐싱 무효화 방법

Next.js에서 캐싱을 무효화하여 동적으로 데이터를 가져오는 다양한 방법이 존재합니다.

동적으로 데이터를 가져오면 해당 세그먼트는 동적으로 렌더링됩니다.

개별 fetch 요청

fetch 메서드의 옵션을 활성화하여, 가져온 데이터 캐싱을 비활성화할 수 있습니다.

다음 두 방법은 모두 가져온 데이터를 캐싱하는 기능을 비활성화합니다.

const myData = fetch(..., { cache: 'no-store' });
// 또는
const yourDate = fetch(..., { revalidate: 0 });

개별 컴포넌트 또는 함수

특정 컴포넌트 또는 데이터를 가져오는 함수에 캐싱 무효화를 적용하기 위해 unstable_noStore 메서드를 사용할 수 있습니다.

// 컴포넌트
import { unstable_noStore as noStore } from 'next/cache';

export default async function Page() {
  noStore();
  const data = await fetch(...);
  const data2 = await db.query(...);
  // ...
}

// 함수
export async function fetchUser(id: string) {
  noStore();
  const users = await fetch(...);
  // ...
}

경로 세그먼트 전체

특정 경로 세그먼트에 존재하는 모든 데이터 가져오기 작업에 캐시 무효화 옵션을 추가할 수 있습니다.

export const dynamic = 'force-dynamic';
// 또는
export const fetchCache = 'force-no-store';