When using the InfiniteHits widget with Next.js, you may encounter issues when using createInfiniteHitsessionStorageCachewith server side rendering (SSR).
It’s normal to encounter a hydration error as sessionStorageCache is local, so the server cannot access the client’s browser cache and thus renders without the cache.
Our recommended solution is to create a custom cache based on sessionStorageCache, which would skip the first read. For an example of how to create a custom cache, please refer to this guide.
Another potential solution would be to only render the hits on the client side. You can refer to this guide for a CSR example.
An alternate approach would be to skip reading from the cache while hydrating, but this would cause the hits to flicker and possibly cause shifts in the scroll position. For these reasons, we would not recommend this approach unless absolutely necessary.