prefetch page context

[usk94]

resolve #246

This PR introduces a feature to prefetch pageContext (specifically focusing on data) when users hover over a link.

To ensure efficient network usage, the prefetch operation includes a cooldown period to prevent it from being re-triggered too soon after the initial action.
And if the user hovers over multiple links, pageContext fetched for previous links can be used instead of being discarded.

Users can configure this feature through +config.ts or by setting data-prefetch-page-context attributes directly on anchor tags.

[usk94]

@brillout
I would appreciate some guidance on how to determine when the prefetch of pageContext is complete.
While I have managed to fetch the context containing config, exportsAll, etc., when hovering over a link, I am unsure how to carry this data over to the rendering of the next page after navigation.

Any advice on this would be greatly helpful. Thank you in advance for your assistance.

[brillout]

@usk94 I will have a look and reply after I'm finished what I'm currently working on. ETA (beginning) of next week.

[usk94]

@brillout
Thank you for your response; I await your further insights.

[brillout]

@usk94 Alright, let's do this!

Have a look at renderPageClientSide.ts, that's where the whole client-side rendering orchestration happens. This file has a globalObject so I think we can save the prefetched pageContext there. As for the prefetching itself, how about we use getPageContextFromHooks_isNotHydration() to do the pre-fetching?

Open question: do you think viewport prefetching makes sense for pageContext pre-fetching? This seems quite aggressive, maybe too aggressive. I'd be inclined to not even offer this setting 🤔

[usk94]

@brillout

Have a look at renderPageClientSide.ts, that's where the whole client-side rendering orchestration happens. This file has a globalObject so I think we can save the prefetched pageContext there. As for the prefetching itself, how about we use getPageContextFromHooks_isNotHydration() to do the pre-fetching?

Thanks! I'll try it.

Open question: do you think viewport prefetching makes sense for pageContext pre-fetching? This seems quite aggressive, maybe too aggressive. I'd be inclined to not even offer this setting 🤔

Are you concerned that, for example, it might be too aggressive in terms of saturating the network with too many API requests?

For instance, in frameworks like Astro, when viewport prefetching is enabled, the priority of these requests is managed to be lower to mitigate potential network congestion.
https://docs.astro.build/en/guides/prefetch/

But even with that consideration, I agree that it might be too aggressive. I think starting with hover prefetching would be sufficient.

[brillout]

todo: getPageContextFromHooks_isNotHydration return does not contains "urlOriginal", "Page".
// maybe I need to merge with pageContext(props).

Yes, that's expected. It only fetches the pageContext from hooks, most notably onBeforeRender() and data() (but not onRenderClient()).

I was thinking whether we should also call onRenderClient() upon prefetching but that isn't trivial (it would need to render the next page in some kind of virtual DOM). So I'm thinking that only using getPageContextFromHooks_isNotHydration() is fine for now.

Let me know if you think getPageContextFromHooks_isNotHydration() doesn't fit, I can do some refactoring.

Are you concerned that, for example, it might be too aggressive in terms of saturating the network with too many API requests?

Yes, and also overloading the server (its database and logs).

But even with that consideration, I agree that it might be too aggressive. I think starting with hover prefetching would be sufficient.

👍 We could also, eventually, add support for viewport prefetching for individual links that opt in using the data- attribute but I think we can skip that for now.

Astro

Indeed Astro seems to be using clever heuristics. If you want we can improve Vike's prefetching in a follow up PR after this one. I also have a couple of ideas for improving static asset prefetching.

[brillout]

@Boeing787 (sponsor who requested this feature) Do you have any special wishes? Your use case is that you want data to be prefetched when the user hovers a on link, correct?

[Boeing787]

@brillout correct, to load the pageContext

[usk94]

@brillout
Thank you for the feedback. I acknowledge that I significantly lacked the careful and professional approach you mentioned.

If I have the opportunity to contribute in the future, I'll make sure to double-check my code more thoroughly. I appreciate your guidance and support.

[brillout]

No issues, we're all learning 🙂