Hi everyone,

I have a site, built in App router, that relies on search/filtering... we're using Algolia for this. There are a few instances around the site where I need to present some options in the form of filters, the data for these filters is pulled from Algolia. I'm using zustand to handle our stores and would like to request some data from Algolia, save that to our store and then reference it throughout the application.

In the Pages router I had a Layout component that ran this request and updated the store. I'm trying to figure out the best approach to do the same with App router. Currently, in my root layout.tsx I've included a storeState.tsx component that basically returns nothing but runs the data request and store update. This works great, but feels a little rogue?

Now I know I could include these functions in say my Filter component but the data is also used elsewhere. Including the storeState client component in my layout.tsx file ensures that wherever the user lands the data will be populated and available. Alternative is separating the request/update out into a hook/lib file and running it from wherever its needed. If one of these components loads and the data already exists then it just skips the update and returns the data.

Reason I went with the storeState is because there's some other data that needs setting too, thought I may as well just handle it all in one place.

Thoughts? Roast me...