Next.js에서는 데이터가 변경될 때 이를 최신 상태로 유지하기 위한 몇 가지 중요한 기능을 제공한다. 이번 글에서는 Revalidate와 Redirect 기능에 대해 슥 알아보겠다.
Next.js 공식문서를 참고한 이 글은 캐싱된 데이터를 최신 상태로 유지하고, 사용자를 적절한 페이지로 이동시키는 방법에 대해 주로 설명한다.
Revalidate와 Redirect가 왜 중요한가?
Next.js에서는 페이지의 데이터를 빠르게 제공하기 위해 클라이언트 측 라우터 캐시(Client-side Router Cache)를 사용한다. 이 캐시는 사용자가 페이지 간 빠르게 이동할 수 있게 하며, 서버 요청 횟수를 줄여 성능을 향상시킨다. 그러나 데이터가 변경되었을 때, 이 캐시가 최신 상태로 유지되지 않으면 문제가 발생할 수 있다. 예를 들어, 게시물 페이지에서 새로운 글이 추가되었을 때, 캐시된 데이터를 계속 보여준다면 사용자는 업데이트된 정보를 보지 못할 것이다.
이를 해결하기 위해, Next.js에서는 특정 경로의 캐시를 무효화하고, 새로운 데이터를 서버에서 가져오도록 하는 Revalidate 기능을 제공한다.
위에서 언급한 Client-side Router Cache 훑고 가기
클라이언트 측 라우터 캐시(Client-side Router Cache)는 사용자가 페이지 간 이동할 때 이전에 방문한 페이지의 데이터를 클라이언트(브라우저)에 캐시하여 저장해두는 방식이다. 이를 통해, 사용자가 페이지를 다시 방문할 때 서버에 추가 요청을 보내지 않고도 빠르게 로드할 수 있다. 이는 서버 요청 횟수를 줄여 네트워크 부담을 줄인다.
왜 Next.js는 이 방식을 채택했는가?
Next.js는 사용자 경험을 최적화하기 위해 클라이언트 측에서의 빠른 페이지 전환을 중요시한다. 클라이언트 측 라우터 캐시는 페이지 전환 시 서버로의 추가 요청을 최소화하여 더 빠른 응답을 제공하고, 네트워크 트래픽을 줄임으로써 서버 부하를 감소시킨다. 이를 통해 전체적인 성능을 향상시키고, 더 나은 사용자 경험을 제공할 수 있다.
RevalidatePath란?
revalidatePath함수는 특정 경로의 캐시를 무효화하고, 해당 경로의 최신 데이터를 서버에서 가져오도록 한다. 예를 들어, 새로운 인보이스가 추가된 후/dashboard/invoices페이지의 캐시를 지우고, 새로운 데이터를 가져와 사용자에게 보여줄 수 있다.
// /app/lib/actions.ts
'use server';
import { z } from 'zod';
import { sql } from '@vercel/postgres';
import { revalidatePath } from 'next/cache';
// 새로운 인보이스를 생성하는 함수
export async function createInvoice(formData: FormData) {
const { customerId, amount, status } = CreateInvoice.parse({
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
});
const amountInCents = amount * 100;
const date = new Date().toISOString().split('T')[0];
await sql`
INSERT INTO invoices (customer_id, amount, status, date)
VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
`;
// /dashboard/invoices 페이지의 캐시 무효화
revalidatePath('/dashboard/invoices');
}
위 코드는 새로운 인보이스가 추가된 후 해당 페이지의 캐시를 지우는 과정을 보여준다. 이렇게 하면 사용자는 최신 상태의 데이터를 바로 볼 수 있게 된다.
Redirect란?
redirect함수는 사용자를 특정 페이지로 다시 보내는 역할을 한다. 예를 들어, 새로운 인보이스를 추가한 후 사용자를 다시/dashboard/invoices페이지로 이동시키고 싶을 때 사용한다. 이렇게 하면 사용자는 데이터를 업데이트한 후 바로 해당 페이지로 이동할 수 있다.
// /app/lib/actions.ts
'use server';
import { z } from 'zod';
import { sql } from '@vercel/postgres';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
// 새로운 인보이스를 생성하고 리다이렉트하는 함수
export async function createInvoice(formData: FormData) {
const { customerId, amount, status } = CreateInvoice.parse({
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
});
const amountInCents = amount * 100;
const date = new Date().toISOString().split('T')[0];
await sql`
INSERT INTO invoices (customer_id, amount, status, date)
VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
`;
// /dashboard/invoices 페이지의 캐시 무효화 및 리다이렉트
revalidatePath('/dashboard/invoices');
redirect('/dashboard/invoices');
}
위 코드는 새로운 인보이스를 추가한 후, 해당 페이지의 캐시를 무효화하고, 사용자를 다시 해당 페이지로 리다이렉트하는 과정을 보여준다.
결론
Next.js에서 Revalidate와 Redirect 기능은 데이터가 변경될 때 이를 최신 상태로 유지하고, 사용자를 올바른 페이지로 안내하는 데 필수적이다.
이 두 기능을 사용하면, 사용자는 항상 최신 데이터를 보게 되며, 부드럽고 빠른 사용자 경험을 제공할 수 있다.
