Retaining previous navigation's data for faster back-navigation + invalidation

[Boeing787]

Context:

UX Expectation #1:

We are building a social feed -- the feed is made up of a list of posts, and clicking on a post takes you to the post page. Navigating back to the main feed, the user expects to return to the feed from which they originally came.

UX Expectation #2:

Many social platforms want to maintain a feed that feels fresh, so every time new posts are intentionally requested or you refresh the page, the set of posts are always different.

Our app:

Right now, our Vike app fires preloaded queries on every page navigation, forward or backward. This has been fine until now...but our feed works the same way: when the feed query is fired, it always returns new posts. This means that when a user navigates back to the feed from a post page, the preloaded feed query fires, and they are returned to a completely different feed than the one from which they came earlier. This goes against UX Expectation #1.

What we've done so far:

On our end, we implemented previous navigation preloaded caching in +onRenderClient and +onBeforeRender, which is working great. Now, returning from the post page to the original feed loads the preloaded query data from the previous navigation's cache, and the user is returned to right where they expected, seeing the original data.

Where we need advice

There are still instances in our application where we want to bust the previous navigation preloaded query cache. Example: when you make a payment on our platform, and you navigate back to the payments page, you should see your new payment -- this data should be refetched. This is something we would want to control per-navigation. We are using client-side navigation.

How would you do it?

Attempt at solution

I thought about adding a custom parameter to pageContext, and then invalidating the cache in +onRenderClient and +onBeforeRender based on whether that parameter is present.

The documentation suggests passing custom pageContext parameters to navigate from vike/client -- like this:

navigate('some/url', { pageContext: { customPageContext } })

This doesn't seem to work...anything passed here isn't available in pageContext throughout the app. 🐛 ?

Ideally, we would do something like navigate('/some/url', { pageContext: { invalidatePreloadedQueryCache: true } }), but curious if there are any other thoughts!

[Boeing787]

@brillout this is what we were chatting about on Discord. Brought into public view so other folks can benefit

[brillout]

Your use case and your approach to implement it sounds good to me.

This doesn't seem to work...

What Vike version are you using? The pageContext argument of navigate() is a fairly recent addition.

[brillout]

Update

[Boeing787]

Can the pageContext passed to navigate be accessible on the server in onBeforeRender? Note that we are using client navigation

[brillout]

I don't see a way to do it. I don't see how that information could be passed along with the pageContext.json HTTP request.

In general, the server-side doesn't have any information about the previous page. Maybe that could be a feature request 🤔

Maybe you can try to hack it with cookies.

[Boeing787]

Just a word that values in the supplementary pageContext passed to navigate in 0.4.209 (latest as of now) aren't available to the pageContext in +onRenderClient

This is reproducible using the react-full example here: Just add { pageContext: { test: true } } to any navigation call, and observe that pageContext.test is undefined in +onRenderClient.

https://github.com/vikejs/vike/blob/main/examples/react-full/README.md

@brillout Let me know if I am doing something wrong here; I also allow-listed test as a parameter that can be passed to the client.

[brillout]

I cannot reproduce.

The following works for me:

~/code/vike/examples/react-full (main*$|u=) git diff
diff --git a/examples/react-full/pages/index/+Page.tsx b/examples/react-full/pages/index/+Page.tsx
index 75dcbd3d28..54ebc65e94 100644
--- a/examples/react-full/pages/index/+Page.tsx
+++ b/examples/react-full/pages/index/+Page.tsx
@@ -20,7 +20,7 @@ function Page() {
           onClick={() => {
             const target = ['/markdown', '/star-wars', '/hello/alice']
             const randomIndex = Math.floor(Math.random() * target.length)
-            navigate(target[randomIndex])
+            navigate(target[randomIndex], { pageContext: { bla: 1 }})
           }}
         >
           Random Page
diff --git a/examples/react-full/renderer/+onRenderClient.tsx b/examples/react-full/renderer/+onRenderClient.tsx
index 8d6d9d52ff..21f1871a74 100644
--- a/examples/react-full/renderer/+onRenderClient.tsx
+++ b/examples/react-full/renderer/+onRenderClient.tsx
@@ -9,6 +9,8 @@ import type { OnRenderClientAsync } from 'vike/types'
 
 let root: ReactDOM.Root
 const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRenderClientAsync> => {
+  // @ts-ignore
+  console.log('pageContext.bla', 'bla' in pageContext && pageContext.bla)
   const { Page } = pageContext
   const page = (
     <Layout pageContext={pageContext}>

Then click on the Random Page button at the bottom of the landing page.