Skip to content

fix(persist): SSR 가드, skipHydration, rehydrate() API 추가 - #8

Open
ayden94 wants to merge 1 commit into
mainfrom
fix/persist-ssr-rehydrate
Open

fix(persist): SSR 가드, skipHydration, rehydrate() API 추가#8
ayden94 wants to merge 1 commit into
mainfrom
fix/persist-ssr-rehydrate

Conversation

@ayden94

@ayden94 ayden94 commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Summary

persist 미들웨어를 Next.js App Router 같은 SSR 환경에서 안전하게 사용할 수 있도록 수정했습니다.

Closes #7

Changes

1. SSR 크래시 수정

  • readStorageValuegetCookietypeof window/typeof document 가드 추가
  • 서버에서 storage 접근 시 null 반환 → ReferenceError 방지

2. skipHydration 옵션

  • local, cookie, session 모든 config variant에 skipHydration?: boolean 추가
  • true 시 store 생성 시점의 eager hydration을 스킵하고 initial state 유지

3. store.persist.rehydrate() / hasHydrated()

  • rehydrate(): 수동 hydration 트리거 (한 번만 호출 가능, 이후 no-op)
  • hasHydrated(): hydration 완료 여부 반환
  • 클라이언트 useEffect에서 호출해 hydration mismatch 방지

4. onRehydrateStorage 콜백

  • rehydration 완료 시점 통지 (zustand 패턴과 동일)
  • factory가 current state를 받고, callback이 rehydrated state + error를 받음

5. 타입 export

  • PersistControls, PersistStore, OnRehydrateStorage, OnRehydrateStorageCallback

6. 문서

  • docs/middleware/persist.mdx + .ko.mdx: SSR/hydration 섹션 추가
  • docs/guides/lifecycle-reads-writes.mdx + .ko.mdx: SSR 섹션 업데이트

Test results

  • 기존 135개 테스트 + 신규 13개 테스트 = 148 pass, 0 fail
  • pnpm test:typecheck (build + tsc --noEmit) 통과

Acceptance criteria

  • persist store를 Next.js App Router 서버 렌더에서 사용해도 크래시하지 않는다
  • persist store를 클라이언트 hydration 시 hydration mismatch 경고가 발생하지 않는다 (skipHydration: true + rehydrate())
  • skipHydration: true 옵션을 제공하면 store 생성 시 자동 hydration을 스킵한다
  • store.persist.rehydrate()로 수동 hydration을 호출할 수 있다
  • Next.js App Router용 persist 사용 패턴을 문서에 추가한다

서버 환경에서 localStorage/sessionStorage/document.cookie 접근 시
ReferenceError로 크래시하는 문제를 수정했습니다. readStorageValue와
getCookie에 typeof window/document 가드를 추가해 서버에서는 null을
반환하도록 했습니다.

Next.js App Router 같은 SSR 환경에서 eager hydration이 React
hydration mismatch를 발생시키는 문제를 해결하기 위해 skipHydration
옵션과 store.persist.rehydrate() / hasHydrated() API를 추가했습니다.
onRehydrateStorage 콜백으로 rehydration 완료 시점을 통지할 수 있습니다.

Closes #7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(persist): SSR 환경(Next.js App Router)에서 서버 크래시 및 hydration mismatch 발생

1 participant