문제 상황

최근 프로젝트에서 사용자가 팔로우/언팔로우 버튼을 클릭할 때, 프로필 정보가 즉시 업데이트되지 않고 페이지를 새로고침해야만 변경 사항이 반영되는 문제가 발생했다. 이 문제는 사용자 경험을 저하시킬 수 있으므로, 팔로우/언팔로우 후에 프로필 정보가 즉시 반영되도록 개선이 필요했다.

문제 원인

문제의 원인은 팔로우/언팔로우 버튼을 클릭했을 때, 팔로우 상태가 변경된 후 서버 사이드에서 데이터를 다시 가져와 클라이언트로 반영하지 않았기 때문이다.

팔로우 버튼을 클릭하면, 팔로우 상태를 변경하는 함수가 Sanity에 있는 데이터를 업데이트 하지만, 이 변경 사항이 클라이언트의 화면에 즉시 반영되지 않기 때문에 새로고침이 필요하게 된다.

이를 해결하기 위해서는 서버 사이드에서 데이터 변경 후, 클라이언트의 캐시를 재검증하여 최신 데이터를 가져와야 한다.

해결 방법

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

Server Actions

Next.js의 최신 기능으로, 클라이언트에서 직접 서버 함수를 호출할 수 있게 해준다.

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

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} />
    </>
  );
}