서버 액션이란?서버 액션은 Next.js에서 제공하는 기능으로, 브라우저에서 직접 호출할 수 있는 서버 측 비동기 함수이다. 이를 통해 별도의 API 엔드포인트를 만들지 않고도 클라이언트에서 서버 측 로직을 실행할 수 있다.서버 액션을 사용하려면 함수 내부에 "use server" 지시어를 추가하면 된다.export default function Page() { const saveName = async (formData: FormData) => { "use server"; const name = formData.get("name"); await sql`INSERT INTO Names (name) VALUES (${name})`; }; return ( 제출 ..

문제 상황프로젝트를 진행하던 중 사용자가 팔로우/언팔로우 버튼을 클릭할 때, 프로필 정보가 즉시 업데이트되지 않고 페이지를 새로고침해야만 변경 사항이 반영되는 문제가 발생했다.이 문제는 사용자 경험을 저하시키는 상황이기때문에 반드시 개선이 필요했다.원인 분석팔로우 버튼을 클릭하면 팔로우 상태를 변경하는 함수가 Sanity의 데이터를 업데이트한다. 하지만 이 변경 사항이 클라이언트 화면에 즉시 반영되지 않았다.Next.js는 성능 최적화를 위해 서버에서 가져온 데이터를 캐싱한다. 팔로우 상태가 변경되어도 Next.js는 여전히 이전에 캐싱된 데이터를 사용하고 있었기 때문에, 사용자가 보는 화면은 업데이트되지 않은 상태로 유지되었다.서버 사이드에서 데이터 변경이 발생한 후, 클라이언트의 캐시를 재검증(rev..