😱 로그인했더니 다른 사람 정보가?

LinkDropper·2025년 4월 24일

"어..? 이거 제 정보 아닌데요?"

링크 드라퍼 초기 개발 당시,
어느 날 사용자 A가 제보를 해왔습니다.

“로그인했더니 다른 사람 이메일이 떠요…”

순간 등골이 서늘해졌습니다.
프라이버시가 중요한 서비스에서
다른 사용자의 정보가 보이는 건 치명적인 문제였죠.

확인해보니,
Zustand로 만든 사용자 상태(useUserStore)가
서버에서 여러 사용자에게 공유되고 있었습니다.

SSR에서 Zustand를 쓰면 생기는 문제

Next.js는 기본적으로 SSR(서버사이드 렌더링)을 지원합니다.
페이지 요청이 들어오면 서버에서 HTML을 생성하고, 그 결과를 브라우저에 전달하죠.

그런데 문제가 생기는 포인트는 이겁니다.

// store.ts
import { create } from 'zustand';

export const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

이렇게 만든 store는 Node 서버 메모리에 유지됩니다.
즉, 사용자 A가 로그인해서 상태가 설정되면
사용자 B가 새 요청을 보낼 때 A의 정보가 남아 있을 수 있는 구조입니다.

서버는 stateless해야 하는데, store는 stateful하게 공유되고 있었던 거죠.

Zustand만의 문제는 아닙니다

상태관리	SSR 상태 공유 가능성	대응 필요 여부
Zustand	✅ 높음	직접 분리 필요
Redux	✅ 높음	`createStore()`로 요청마다 분리
Jotai	✅ 있음	atom context 분리 필요
Recoil	❌ 낮음	기본적으로 클라이언트 전용
Context	❌ 낮음	컴포넌트 기반 상태, SSR 공유 없음

대부분의 상태관리 라이브러리는 SSR 환경에서 store 분리 처리가 필요합니다.

✅ 해결 방법 1: 요청마다 store를 새로 생성하기

Zustand는 내부적으로 createStore()를 통해 새로운 store 인스턴스를 만들 수 있습니다.
이를 통해 SSR 환경에서도 사용자별 상태를 격리할 수 있습니다.

// store.ts
import { createStore } from 'zustand';

let store: any;

export const createUserStore = () => createStore(() => ({
  user: null,
  setUser: (user: any) => set({ user }),
}));

export const getUserStore = () => {
  if (typeof window === 'undefined') {
    return createUserStore(); // SSR: 항상 새로운 store 생성
  }
  if (!store) store = createUserStore(); // CSR: 싱글톤 유지
  return store;
};

이 방식은 간단하고 유용하지만,
Next.js App Router 환경이나 복잡한 구조에서는 더 나은 대안도 있습니다.

✅ 해결 방법 2: React Context로 store를 주입하기

createUserStore()로 생성한 store를
React Context로 컴포넌트 트리에 주입하는 방식도 있습니다.
Redux의 Provider 패턴과 비슷하지만 훨씬 가볍고 유연합니다.

// store.ts
import { createStore } from 'zustand';

export const createUserStore = () =>
  createStore(() => ({
    user: null,
    setUser: (user: any) => set({ user }),
  }));

// user-context.tsx
'use client';
import { createContext, useContext, useRef } from 'react';
import { StoreApi, useStore } from 'zustand';
import { createUserStore } from './store';

const UserStoreContext = createContext<StoreApi<any> | null>(null);

export const UserStoreProvider = ({ children }: { children: React.ReactNode }) => {
  const storeRef = useRef(createUserStore());
  return (
    <UserStoreContext.Provider value={storeRef.current}>
      {children}
    </UserStoreContext.Provider>
  );
};

export const useUserStore = <T,>(selector: (state: any) => T) => {
  const store = useContext(UserStoreContext);
  if (!store) throw new Error('useUserStore must be used within <UserStoreProvider>');
  return useStore(store, selector);
};

// layout.tsx or page.tsx
import { UserStoreProvider } from './user-context';

export default function Layout({ children }) {
  return <UserStoreProvider>{children}</UserStoreProvider>;
}

이 방식은 요청별로 완전히 새로운 상태를 주입할 수 있어.
민감한 사용자 데이터에도 안전합니다.

정리하자면

해결 방식	특징	추천 상황
`getUserStore()` 패턴	간단하고 빠름	CSR 위주 앱, 소규모 프로젝트
Context 주입 방식	SSR 완벽 대응	App Router, 민감한 상태 다룰 때