next.js
608ece13 - re-use `loading` from prefetch cache entries across searchParams (#68340)

Commit
1 year ago
re-use `loading` from prefetch cache entries across searchParams (#68340) ### What & Why A route segment's `loading.tsx` file won't be re-used when navigating between the same route but with different search parameters. This means that the loading state won't be shown until it's streamed in as part of the dynamic request. This is because the prefetch cache is keyed by both the pathname and search string. A workaround would be to optimistically prefetch the route + search params of the page you were going to, but often this is not known ahead of time. Additionally, when you have a bunch of links to the same route segment but with search params, you'll have an equal number of prefetch requests to that URL, which is wasteful since each one will return the same partial loading data. ### How Because `layout.tsx` and `loading.tsx` don't receive access to `searchParams`, we're able to reliably re-use the loading state between multiple routes within the same route segment. Only "full" prefetches need to be keyed by the search string, since those could contain responses that that are dependent on the provided params. This refactors the prefetch cache getter logic to look for a suitable "alias" when it would have otherwise been a cache miss. It does this by comparing pathnames of the cache entries: if there's a pathname match, we'll mark it as an alias. The navigation reducer will use this knowledge to only apply the `loading` node and not the actual segment data, so that the router can still make the lazy fetch to get the full dynamic data. Closes NDX-132
Author
Parents
Loading