fix(persist): SSR 가드, skipHydration, rehydrate() API 추가 - #8
Open
ayden94 wants to merge 1 commit into
Open
Conversation
서버 환경에서 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
persist미들웨어를 Next.js App Router 같은 SSR 환경에서 안전하게 사용할 수 있도록 수정했습니다.Closes #7
Changes
1. SSR 크래시 수정
readStorageValue와getCookie에typeof window/typeof document가드 추가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콜백5. 타입 export
PersistControls,PersistStore,OnRehydrateStorage,OnRehydrateStorageCallback6. 문서
docs/middleware/persist.mdx+.ko.mdx: SSR/hydration 섹션 추가docs/guides/lifecycle-reads-writes.mdx+.ko.mdx: SSR 섹션 업데이트Test results
pnpm test:typecheck(build + tsc --noEmit) 통과Acceptance criteria
persiststore를 Next.js App Router 서버 렌더에서 사용해도 크래시하지 않는다persiststore를 클라이언트 hydration 시 hydration mismatch 경고가 발생하지 않는다 (skipHydration: true+rehydrate())skipHydration: true옵션을 제공하면 store 생성 시 자동 hydration을 스킵한다store.persist.rehydrate()로 수동 hydration을 호출할 수 있다