김재욱의 이모저모

문제 발견Next.js + NextAuth로 인증을 구현하던 중, Header 컴포넌트에서 로그인/로그아웃 버튼이 깜빡이는 현상이 발생했어요. 특히 로그인 후 페이지 이동 시, 잠깐 동안 "로그인" 버튼이 보였다가 "로그아웃" 버튼으로 바뀌는 불편한 UX를 보여줬죠.문제점 분석1. Server-Client 하이드레이션 불일치 (Hydration Mismatch)기존 구조는 이랬어요:// layout.tsx (Server Component)export default async function RootLayout({ children }) { const session = await auth(); // 서버에서 세션 가져옴 return ( {/* Client Component */} ..

문제 상황NextAuth.js를 사용하여 JWT 기반 인증을 구현하던 중, 토큰 갱신 과정에서 이상한 현상이 발생했습니다.첫 번째 세션 호출은 성공적으로 refreshAccessToken을 실행하여 토큰을 갱신그러나 동시에 발생한 나머지 세션 호출들은 모두 실패콘솔 로그를 확인해보니 여러 개의 세션이 거의 동시에 호출되고 있었음원인 분석Race Condition 발생문제의 핵심은 여러 세션 호출이 동시에 발생했을 때였습니다.async jwt({ token, user }) { // 토큰 만료 확인 if (Date.now() 시나리오:페이지가 로드되면서 여러 컴포넌트에서 auth() or useSession()를 동시에 호출모든 호출이 거의 동시에 토큰 만료를 확인모든 호출이 동시에 refreshAcce..