flaky cache in CatchAll Route after hydration

[katywings]

Describe the bug

When an existing createAsync call gets updated because of navigation, e.g. if its part of a CatchAll route, there is a somewhat random chance (probably based on timing) that the cache will return the results from the previous call even if the parameters differ. The example below makes it hopefully more clear 😅, you navigate to /about, but for some reason the cache function sometimes just returns /.

Your Example Website or App

https://stackblitz.com/edit/github-xgtjzp?file=src%2Fcomponents%2FTest.tsx

Steps to Reproduce the Bug or Issue

1. Implement a CatchAll Route
2. Add multiple links with urls targeting the CatchAll route
3. Implement a data function with cache, use server and 1 parameter, that just returns the parameter
4. Add a createAsync effect that calls the data function with e.g. location.pathname, output the result in the jsx
5. Reload the browser tab, click on a link
6. Repeat step 5. multiple times
7. Notice how the printed pathname sometimes differs from the actual path

Expected behavior

The cached function should always run with the newest arguments after hydration. For the example that means: when I navigate to /about I expect the cache function to be consistently called with /about

Screenshots or Videos

2024-07-27-23.35.05.8756812671.mp4

Platform

• Browser: Chrome & Firefox
• @solidjs/router: 0.14.1
• solid-js: 1.8.18
• @solidjs/start: 1.0.6

Additional context

Workaround: In the createAsync call, during the first rerun after hydration, run revalidate on the cache

[katywings]

Further discussion about this issue: https://discord.com/channels/722131463138705510/910635844119982080/1267045977760469124

We noticed that the bug can even occur without createAsync!

[ryansolid]

Yeah the issue is with lazy components and interrupted hydration. It thinks it is still hydrating the initial page load and it loads the data originally fetched from the server instead of refetching.