When is Init fired?

[mdings]

I can't find a consistent pattern when the Init method is being fired. Consider the following example on a "page" component:

export const Init = state => {
  console.log('Product page initing') // Brand page initing, Contact page initing etc.
  return {...state}
}

and the following routes:

export default {
    '/': import('./pages/Home'),
    '/contact(/:slug)': import('./pages/Contact'),
    '/brand(/:slug)': import('./pages/Brand'),
   '/product(/:slug'): import('./pages/Product')
}

Whenever I hit the homepage I can see the console message for Contact and Product coming in, but not for Brand.. This makes me wonder whether Init function should at all trigger when a route is not matched? Should it or not? Or only when there is an exact match on the route?

If the latter in the case there is probably a bug with the route matching mechanism

[loteoo]

Init can be fired by multiple different events - When a link enters the view port if eagerLoad is enabled, else it's when a mouse hovers on a link, when you click on a link or last resort, when the view is loaded.

This strategy is borrowed from gatsbyjs, the idea is to make sure data for the next pages is always ready for a fast user experience. Overfetching is less of an issue with gatsby or hyperstatic because the data that is fetched is static JSON files on the same domain. (versus expensive API calls on a live backend).

If you want to trigger an action when pages changes, you use the onRouteChanged subscription

[mdings]

Thanks, that explains!