[Nested Layouts] Fetch data on layout-level

[brillout]

Description

With other frameworks, when navigating a nested layout, the outer layout isn't re-rendered and its data isn't re-fetched.

With Vike, the outer layout is re-rendered, and the data() hook of the page is executed again. The data() hook works at a page-level, and there isn't a way to define nested data() hooks.

Instead of implementing nested data() hooks, the plan is to integrate a data cache into the Vike extension of data fetching tools such as TanStack Query and Telefunc.

Note

Data fetching Vike Extensions already have a cache (they always need to), it's just a matter of fine-tuning the cache.

Note

The plan is still to re-render the outer layout (because I believe it's a less error-prone approach for everyone, including the Vike user as well as the website user). In practice, only the virtual DOM is "re-rendered", so the state of the outer layout is preserved and the real DOM doesn't change.

Technical details.

Approach A

vike-{react,vue,solid} provide a new component hook useDataCacheKey() that returns a key composed of:

• The URL, but without the pathnames of all the nested layouts that the component doesn't belong to.
• The timestamp when Vike changed the URL.

Vike extensions can then use the key to cache data. In other words, the behavior is exactly as the website user expects: data is re-fetched only when navigating the relevant parts of the UI.

Approach B

Alternatively, vike-{react,vue,solid} wrap the nested layouts in a stateful wrapper component (e.g. using React's useState()). Upon navigation, the state of the appropriate wrapper components is updated to trigger a re-render of nested layouts (the page and outer layout aren't re-rendered). But, so far, I think Approach A is superior. (For example, I don't see how Approach B can support the use case when the user clicks on the active link merely to refresh the page.)