Make `+data` and `+onBeforeRender` cumulative

[brillout]

Note

With other frameworks, when navigating a nested layout, the outer layout isn't re-rendered and its data isn't re-fetched. Currently, with Vike, the outer layout is re-rendered, and the data() hook of the page is executed again.

Proposed solution: #1689 (comment). If you need this, add comment down below.

In the meantime, you can use +onBeforeRender as a workaround:

# Data shared across all setting pages
pages/settings/+onBeforeRender.js
pages/settings/+Layout.js

# Data only used by one page
pages/settings/privacy/+data.js
pages/settings/privacy/+Page.js

Note

Alternatively, you can use Vike extensions, such as vike-react-query, to fetch data on a component-level (thus on a layout-level as well), see https://vike.dev/data-fetching#tools.

Note

Regardless of this feature request, the plan is to stick to re-rendering the outer layout. I believe it's a less error-prone approach for the user as well as the website visitor. 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.

[shahyar]

I like this idea. To be clear, would this mean the following?

1. SSR loads, runs pages/+data
2. CSR takes over, reuses data from SSR state of +data
3. CSR navigates, still reusing state of +data. No pageContext.json.

• In the event you have pages/+data.shared or pages/+data.client, at this point it would still re-run.

4. CSR navigates to /settings/privacy which colocates +Page with +data, which fetches pageContext.json via pages/settings/privacy/+data (or run it client-side if .shared|client)

• pages/+data is also run here, and merged with the result of the page-specific +data

[brillout]

No, the data cache isn't meant for your use case. It's only meant for avoiding re-executing +data collocated to +Layout. Consequently, any +data that is collocated to +Page is never cached.

Actually, I'm realizing that it's ambiguous: Vike cannot tell whether pages/(some-group)/+data.js is meant to be 1. a data hook for pages/(some-group)/+Layout.js or 2. a data hook that every pages/(some-group)/**/+Page.js re-uses.

So I'm thinking the data cache should be disabled by default while the user can opt into it. I guess we can implement the data cache separately then. While we are at it, I wonder whether the cache can be extended for other use cases. I created a feature request for it: #1841.