Proposal: +initial-data.ts hook (Usecase: is it possible to call +data ONLY on first load)?

[Blankeos]

Question, is possible to ONLY call +data.ts on first load? Not succeeding?

I'm currently experimenting if there's a way to still use client-side navigations even when +data.ts exists for the page.

If not, can I use onBeforeRender to be able to create this custom data fetching hook?

The hook: +initial-data.ts. It's similar to getInitialProps - This is only on the Pages Router of NextJS. Basically, for first-loads it's the same as +data.ts, but for succeeding client-side navigations, it doesn't get called anymore. (That means I'm okay with stale data for succeeding page loads. The +data is basically just there for dynamic head tag for SEO purposes (e.g. a shareable social app with dynamic OG image, but UX should still feel like a CSR app).

How is it different from +data?

Runs on	+data.ts	+initial-data.ts
First-load	Yes	Yes
Succeeding client-side navigations	Yes	No

I noticed simply putting in +data.ts in the page's folder, will mean you block the first byte.

Demonstration of the problem, notice that...

• Going to "Page with Data" is 🐌 slow under network conditions. (It always fetches index.pageContext.json because it has +data.ts)
• Going to "Page with No Data" is always ⚡️ instant, no matter the network (always uses client-side navigation).

vike-data-blocking-first-byte.mp4

---

That's the idea. Let me know if you guys think there's actually already an existing way to do this with the current Vike APIs. Maybe I'm overthinking it.

[Blankeos]

Alright cool. I actually found something in the docs for my usecase: https://vike.dev/pageContext.json#avoid-pagecontext-json-requests

It was quite deep to find though.

1. Started with this: https://vike.dev/meta#example-modify-data-env
2. Or here: https://vike.dev/data#environment
3. Then here: https://vike.dev/pageContext.json#avoid-pagecontext-json-requests

[Blankeos]

Basically:

// +data.shared.ts (Will make +data run on first-load, and on client-navigations, but won't fetch `pageContext.json` anymore)

export async function data(pageContext) {
  if (typeof window !== "undefined") return; // Don't run on the client.
  
  return {
     dehydratedState: {...}
  }
}

// +Page.tsx
export default function MyPage() {
   const data = useData();
   useHydrate(data.dehydratedState);

  const myQuery = createQuery(...);
}

Here's a sample repo: https://github.com/Blankeos/vike-vs-next-ssr-experiment/tree/main/vike.

Personally works great for me.

cached.data.shared.ts.mp4

---

Alternative solution (I think would be easier), is just caching the pageContext.json.

[brillout]

I noticed simply putting in +data.ts in the page's folder, will mean you block the first byte.

That's expected, you can start rendering before fetching only when using render-as-you-fetch libraries that leverage the HTML stream. See vikejs/vike-react#148.

call +data ONLY on first load

Indeed, I think there is room for improvement for this use case. It's very much on the radar and I've a couple of ideas.

I actually found something in the docs for my usecase: https://vike.dev/pageContext.json#avoid-pagecontext-json-requests

👍

[brillout]

@Blankeos See vikejs/vike-react#148. Where is your data located? Have you considered using vike-react-query or do you prefer RPC? (We're working on vike-react-telefunc.)