[240919 TIL] revalidatePath, on-demand ISR

새로 나온 chatGPT-o1 에게 ISR 에 관해 물어봤습니다.
revalidatePath 를 통해 데이터가 업데이트 되면 메인페이지를 ISR 하도록 하였습니다.
이것이 next.js 에서 적용되는 원리와 과정에 대해 물어보았습니다.

GPT 쌤의 답변

당신은 Next.js 14 프로젝트에서 App Router를 사용하고 있으며, 라우트 핸들러 내에서 revalidatePath 함수를 구현하여 서버 데이터가 업데이트될 때 Incremental Static Regeneration(ISR)을 트리거했습니다. 이 메커니즘은 전체 재빌드나 수동 개입 없이도 정적으로 생성된 페이지가 최신 데이터를 반영하도록 보장합니다. 이제 이것이 어떻게 작동하는지 원리와 과정을 자세히 살펴보겠습니다.

---

Incremental Static Regeneration(ISR)의 이해

Next.js에서의 ISR은 사이트를 빌드한 후에도 정적 페이지를 생성하거나 업데이트할 수 있게 해줍니다. ISR을 사용하면 정적 사이트 생성(SSG)의 이점(빠른 로딩 시간 및 SEO 혜택 등)을 유지하면서도 데이터 변경에 따라 런타임에 페이지를 업데이트할 수 있습니다.

• 정적 생성(Static Generation): 페이지는 빌드 시에 생성되어 정적 파일로 제공됩니다.
• Revalidation(재검증): 페이지는 지정된 시간(revalidate 기간) 후 또는 revalidatePath와 같은 함수를 사용하여 프로그래밍 방식으로 백그라운드에서 다시 생성될 수 있습니다.

---

revalidatePath의 역할

revalidatePath 함수는 특정 경로의 캐시를 프로그래밍 방식으로 무효화하는 데 사용되며, Next.js가 다음 요청 시 최신 데이터로 해당 페이지를 다시 생성하도록 합니다.

• 구문(Syntax): revalidatePath(path: string, options?: { unstable_onlyGenerated: boolean })
• 매개변수:
  • path: 다시 검증할 페이지의 경로(예: 홈 페이지의 경우 /).
  • options: 추가 옵션(예: 레이아웃 지정 또는 생성된 페이지만 선택).

---

코드에서 revalidatePath가 작동하는 방식

제공된 코드에서의 과정을 분석해보겠습니다.

1. GET 요청 처리

export async function GET(req: Request) {
    const supabase = createClient();
    const { data, error } = await supabase
        .from("projects")
        .select("*")
        .order("number", { ascending: true });

    if (error) {
        revalidatePath("/", "layout");
        return NextResponse.json({ error: error.message }, { status: 500 });
    }

    return NextResponse.json(data, { status: 200 });
}

• 데이터 가져오기: Supabase 데이터베이스에서 프로젝트 데이터를 가져옵니다.
• 에러 처리: 데이터 가져오기 중 에러가 발생하면 revalidatePath("/", "layout");을 호출합니다.
• 재검증: 에러 시 재검증을 호출하는 것은 일반적이지 않을 수 있지만, 코드에서는 오래된 데이터나 불일치한 데이터를 새로 고침하기 위해 이를 사용합니다.

2. POST 요청 처리

export async function POST(req: Request) {
    // ... (이미지 처리 및 업로드)

    const { data, error } = await supabase
        .from("projects")
        .upsert({ ...newProject, images: uploadResults.length === 0 ? newProject.images : uploadResults })
        .select()
        .single();

    if (error) {
        revalidatePath("/", "layout");
        return NextResponse.json({ error: error.message }, { status: 500 });
    }

    return NextResponse.json(data, { status: 201 });
}

• 데이터 수정: 데이터베이스에 프로젝트 항목을 삽입하거나 업데이트합니다.
• 에러 시 재검증: GET 핸들러와 유사하게 에러 시 경로를 재검증합니다.
• 성공 응답: 업데이트된 데이터를 201 상태 코드와 함께 반환합니다.

3. 재검증 과정

• 재검증 트리거: revalidatePath("/", "layout");을 호출함으로써 Next.js에게 홈 페이지와 그 레이아웃의 캐시 버전을 무효화하도록 지시합니다.
• 다음 요청: 다음에 사용자가 홈 페이지(/)를 요청하면, Next.js는 해당 페이지를 온디맨드로 최신 데이터로 다시 생성합니다.
• 업데이트된 콘텐츠 제공: 전체 재빌드나 배포 없이도 사용자에게 새로운 프로젝트 데이터가 반영된 페이지를 제공합니다.

---

기본 메커니즘

정적 페이지 생성

• 빌드 시: Next.js는 빌드 시점의 코드와 데이터를 기반으로 정적 페이지를 생성합니다.
• 캐싱: 이러한 페이지는 캐시되어 사용자에게 제공되어 빠른 응답 시간을 제공합니다.

온디맨드 재검증

• 캐시 무효화: revalidatePath가 호출되면 Next.js는 해당 캐시된 페이지를 오래된 것으로 표시합니다.
• 백그라운드 재생성: 해당 경로에 대한 다음 요청 시, Next.js는 오래된 페이지를 제공하고(구성된 경우) 백그라운드에서 페이지를 재생성하기 시작합니다.
• 즉시 재생성: 또는 Next.js는 페이지가 재생성될 때까지 응답을 차단하여 사용자가 항상 최신 콘텐츠를 받도록 할 수 있습니다.

재생성 중 데이터 가져오기

• 최신 데이터 가져오기: 재생성 과정에서 모든 데이터 가져오기 함수(예: 데이터베이스 쿼리)가 다시 실행됩니다.
• 캐시 업데이트: 새로 생성된 페이지는 캐시에서 오래된 페이지를 대체합니다.

---

과정 시각화

1. 초기 요청:
   • 사용자가 /를 요청합니다.
   • Next.js는 캐시에서 정적으로 생성된 페이지를 제공합니다.
2. 데이터 업데이트:
   • POST 요청으로 데이터베이스의 프로젝트 데이터가 업데이트됩니다.
   • revalidatePath("/", "layout");이 호출되어 /의 캐시를 무효화합니다.
3. 후속 요청:
   • 다른 사용자가 /를 요청합니다.
   • Next.js는 페이지가 오래되었음을 감지합니다.
   • Next.js는 페이지를 재생성합니다:
     • 최신 프로젝트 데이터를 가져옵니다.
     • 업데이트된 콘텐츠로 페이지를 다시 렌더링합니다.
   • 새 페이지는 캐시되어 사용자에게 제공됩니다.

---

자동으로 보이는 이유

• 매끄러운 경험: 재검증은 백그라운드에서 수동 개입 없이 이루어집니다.
• 일관된 데이터: 재검증이 트리거된 후 사용자는 항상 최신 데이터를 받습니다.
• 전체 재빌드 불필요: 영향을 받는 페이지만 재생성되어 리소스와 시간을 절약합니다.

---

고려사항 및 모범 사례

• 에러 처리: 일반적으로 데이터 업데이트가 성공한 후 재검증하는 것이 좋습니다. 코드에서는 에러 시 재검증하여 잠재적인 불일치를 해결합니다.
• 선택적 재검증: 성능을 최적화하기 위해 정확히 어떤 경로를 재검증할지 지정할 수 있습니다.
• 재검증 제한: 빈번한 재검증을 트리거할 때의 속도 제한이나 성능 영향을 주의하세요.

---

요약

라우트 핸들러에서 revalidatePath를 사용함으로써, Next.js의 ISR 기능을 활용하여 정적 페이지가 데이터베이스의 최신 데이터와 동기화되도록 합니다. 이 과정은:

1. 캐시된 페이지 무효화: 데이터 변경이 발생할 때 지정된 경로를 오래된 것으로 표시합니다.
2. 온디맨드 재생성: 다음 요청 시 Next.js가 최신 데이터로 페이지를 재생성합니다.
3. 업데이트된 콘텐츠 제공: 전체 사이트 재빌드 없이도 사용자에게 페이지의 최신 버전을 제공합니다.

이 메커니즘은 정적 사이트의 성능 이점과 서버 렌더링 애플리케이션의 동적 특성을 결합하여 매끄럽고 효율적인 사용자 경험을 제공합니다.

---

추가 자료

• Next.js의 ISR 문서: Incremental Static Regeneration
• revalidatePath 함수: 온디맨드 재검증

---

Next.js의 ISR과 revalidatePath와 같은 함수를 이해하고 활용함으로써, 데이터 소스와 동기화되는 고성능 애플리케이션을 구축하여 콘텐츠 제공에서 속도와 신선함을 모두 제공할 수 있습니다.

---