Getting Started

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

How store works

Note: The store is persisted to a cookie that is setup so to be read/write on the client side, and read on the server.

When you visit http://localhost:3000, the following happens:

• RSC reads your the persisted value of your store, via the cookie, and passes the value into a client component.
  • See src/app/layout.tsx
• Before any zustand hooks are called, we manually hydrate the store with the value passed in from the server.
  • See src/store/preferences/hydrate-preferences-store.tsx
• Instead of the default zustand hook, we create our own hook for accessing the store since zustand's default hook doesn't seem to respect the manually hyrated value
  • See src/store/preferences/hooks.tsx
  • Note: this hook doesn't not implement the ability to subscribe to a slice of the store yet
• User can now interact with the SelectSort component which mutates the store
  • Test it at http://localhost:3000
  • See src/components/sort-selector.tsx
• Changes to the sort preference automatically update the DemoList component
  • See src/components/demo-list.tsx

All of this happens in a way where if you refresh the page, the initial render pre next.js hydration has the already hydrated zustand store.