zustand-stores

To manage authentication state with Zustand during SSR, initialize the auth store using server-provided data like window.__INITIAL_AUTH__. This hydrates the initial state safely, keeping server-rendered HTML and client navigation in sync without hydration mismatches.

SSR-safe state initialization is the process of seeding a client-side store with server-rendered data before hydration. It prevents hydration mismatches by ensuring the server-generated HTML and the client's initial state match perfectly upon loading.

You can access Zustand store state outside React components by calling the getState() method directly on the store hook, such as useAuthStore.getState(). This provides centralized access to helpers and current state values.

Yes, you can use Zustand for auth flows in a TypeScript app because it provides a lightweight, type-safe pattern. It allows clear separation of concerns with actions and selectors, making authentication logic easily testable.

Hydration errors occur when the client's initial state differs from the server-rendered HTML. To fix this, ensure SSR-safe initialization by populating your Zustand store with server-provided session data before client hydration begins.