Next.js revalidatePath, redirect

Next.js는 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-Side Rendering)을 손쉽게 사용할 수 있도록 지원합니다.

이러한 기능 덕분에 캐시된 데이터를 효과적으로 관리하고, 사용자에게 최신 정보를 제공할 수 있습니다.

 

Next.js에서는 정적 페이지를 미리 생성해두어 빠른 응답 속도를 제공할 수 있습니다.

그러나 데이터가 변경되었을 때 이 캐시를 수동 또는 자동으로 무효화하여 최신 데이터를 반영해야 합니다.

• revalidatePath: 특정 경로에 해당하는 정적 페이지의 캐시를 무효화(재검증)하여, 변경된 데이터를 반영할 수 있도록 합니다.
• redirect: 서버나 클라이언트에서 특정 경로로 사용자를 이동시키는 함수로, 작업 후 결과 페이지로 자연스럽게 연결할 때 사용합니다.

 

revalidatePath 

정적 페이지 생성(Static Generation)을 사용하는 경우, 빌드 시점의 데이터가 캐싱됩니다.

그러나 데이터가 변경될 경우 캐시된 페이지는 오래된 정보를 보여줄 수 있습니다.
revalidatePath 함수는 특정 경로에 대한 캐시를 무효화하고, 최신 데이터를 반영하도록 강제로 페이지를 다시 생성하도록 요청합니다.
이는 보통 관리자 페이지에서 데이터 수정 후 최신 정보로 페이지를 갱신할 때 사용됩니다.

예제

인보이스(invoice) 데이터가 업데이트된 후, /dashboard/invoices 경로의 캐시를 무효화하는 과정을 보여줍니다.

import { revalidatePath } from 'next/cache';

/**
 * 인보이스 업데이트 후 캐시 무효화 함수
 * @param invoiceId - 업데이트할 인보이스의 ID
 */
export async function updateInvoice(invoiceId: string): Promise<void> {
  try {
    // 1. 데이터베이스에서 인보이스 업데이트 작업 수행
    // 예시: await updateInvoiceInDatabase(invoiceId);
    
    // 2. 업데이트 후, '/dashboard/invoices' 페이지의 캐시를 무효화
    revalidatePath('/dashboard/invoices');
    
    console.log('인보이스 업데이트 및 캐시 무효화 완료');
  } catch (error) {
    console.error('인보이스 업데이트 중 오류 발생:', error);
    // 추가적인 에러 핸들링 로직 구현 가능
    throw error;
  }
}

 

• 에러 처리: 업데이트 작업 중 에러 발생 시, 적절한 로깅과 추가 핸들링이 필요합니다.
• 캐시 무효화 시점: 데이터를 변경한 직후 호출하여 최신 페이지가 생성되도록 해야 합니다.

---

redirect 

서버 액션이나 API 요청 후, 특정 페이지로 사용자를 이동시키고자 할 때 redirect 함수를 사용합니다.
이 함수는 클라이언트와 서버 모두에서 사용할 수 있으며, 사용자에게 결과 페이지를 보여줄 때 유용합니다.

예제

폼 제출 후 서버에서 데이터 처리가 완료되면 사용자를 대시보드 페이지로 이동시키고 싶을 때 아래와 같이 사용할 수 있습니다.

import { redirect } from 'next/navigation';

/**
 * 폼 데이터 처리 후 대시보드 페이지로 리디렉션하는 함수
 * @param formData - 제출된 폼 데이터
 */
export async function handleFormSubmit(formData: FormData): Promise<void> {
  try {
    // 1. 폼 데이터 처리 (예: 데이터베이스 저장, API 호출 등)
    // 예시: await processFormData(formData);
    
    // 2. 처리 완료 후 '/dashboard/invoices' 페이지로 리디렉션
    redirect('/dashboard/invoices');
  } catch (error) {
    console.error('폼 제출 처리 중 오류 발생:', error);
    // 에러 페이지로 리디렉션하거나, 사용자에게 피드백 제공 가능
    throw error;
  }
}

 

 

• 서버와 클라이언트에서 사용: Next.js 13 버전 이상에서는 서버 액션에서도 redirect를 사용할 수 있어, 페이지 전환을 쉽게 처리할 수 있습니다.
• 사용자 경험: 데이터 처리 후 자동으로 페이지를 이동시켜, 사용자에게 작업 완료 상태를 명확하게 전달할 수 있습니다.

 

두 기능의 조합: 데이터 업데이트 후 최신 상태 반영과 페이지 이동

실제 애플리케이션에서는 데이터 업데이트와 동시에 최신 데이터를 반영한 페이지로 이동하는 시나리오가 자주 발생합니다.

아래 예제는 인보이스 업데이트 후, 캐시를 무효화하고 사용자에게 최신 정보를 보여주기 위해 리디렉션하는 전 과정을 구현한 예제입니다.

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

/**
 * 인보이스 업데이트 후 캐시 무효화 및 리디렉션 처리 함수
 * @param invoiceId - 업데이트할 인보이스의 ID
 */
export async function updateInvoiceAndRedirect(invoiceId: string): Promise<void> {
  try {
    // 1. 데이터베이스에 인보이스 업데이트
    // 예시: await updateInvoiceInDatabase(invoiceId);
    
    // 2. 업데이트가 완료된 후, '/dashboard/invoices' 페이지 캐시 무효화
    revalidatePath('/dashboard/invoices');
    
    // 3. 최신 데이터가 반영된 페이지로 리디렉션
    redirect('/dashboard/invoices');
  } catch (error) {
    console.error('업데이트 및 리디렉션 처리 중 오류 발생:', error);
    // 오류 상황에 대한 추가 처리 로직 구현
    throw error;
  }
}

 

• 데이터 업데이트: 인보이스의 변경 사항을 데이터베이스에 반영합니다.
• 캐시 무효화: 변경된 데이터를 반영하기 위해 /dashboard/invoices 페이지의 캐시를 무효화합니다.
• 리디렉션: 사용자를 해당 페이지로 이동시켜 최신 데이터를 확인할 수 있도록 합니다.