Next.js Server Actions를 활용한 캐시 재검증 문제 해결

문제 상황

프로젝트를 진행하던 중 사용자가 팔로우/언팔로우 버튼을 클릭할 때, 프로필 정보가 즉시 업데이트되지 않고 페이지를 새로고침해야만 변경 사항이 반영되는 문제가 발생했다.
이 문제는 사용자 경험을 저하시키는 상황이기때문에 반드시 개선이 필요했다.

원인 분석

팔로우 버튼을 클릭하면 팔로우 상태를 변경하는 함수가 Sanity의 데이터를 업데이트한다. 하지만 이 변경 사항이 클라이언트 화면에 즉시 반영되지 않았다.

Next.js는 성능 최적화를 위해 서버에서 가져온 데이터를 캐싱한다. 팔로우 상태가 변경되어도 Next.js는 여전히 이전에 캐싱된 데이터를 사용하고 있었기 때문에, 사용자가 보는 화면은 업데이트되지 않은 상태로 유지되었다.

서버 사이드에서 데이터 변경이 발생한 후, 클라이언트의 캐시를 재검증(revalidate)하여 최신 데이터를 가져오는 과정이 없었기 때문에 새로고침이 필요했던 것이다.

해결 방안

Next.js 14의 Server Actions와 revalidateTag를 사용하여 해결했다.

Server Actions란?

Next.js의 13.4에서 도입된 실험적 기능으로, 클라이언트에서 직접 서버 함수를 호출할 수 있게 해준다.

클라이언트 사이드에서 서버 액션을 트리거하여 데이터 변경 후 캐시를 재검증하거나 서버 측 로직을 실행할 수 있기 때문에, 클라이언트와 서버 간의 상호작용을 간소화하고 클라이언트에서 서버 데이터를 직접적으로 업데이트할 수 있다.

1. Server Actions 설정

next.config.js에서 serverActions 기능을 활성화한다.

const nextConfig = {
  experimental: {
    serverActions: true,
  },
  // ...
};

2. 서버 액션 함수 작성

서버에서 revalidateTag 함수를 호출하여 특정 태그를 가진 캐시를 재검증하는 함수를 작성한다.

'use server'; // 서버 사이드에서 실행
import { revalidateTag } from 'next/cache';

export async function revalidateProfileUser(username: string) {
  return revalidateTag(`profile/${username}`);
}

3. FollowButton 컴포넌트 수정

팔로우 버튼 클릭 후 revalidateProfileUser 함수를 호출해서 프로필 정보를 즉시 업데이트하도록 한다.

'use client';

export default function FollowButton({ user }: Props) {
  const { user: loggedInUser, toggleFollow } = useMe();
  // ...

  const handleFollow = async () => {
    await toggleFollow(user.id, !following);
    await revalidateProfileUser(username);
  };

  return (
    <>
      <Button onClick={handleFollow} />
    </>
  );
}

이제 팔로우/언팔로우 버튼을 클릭하면 서버 액션을 통해 캐시가 재검증되어, 페이지 새로고침 없이도 프로필 정보가 즉시 업데이트된다.