passive-yellow

How do I prefetch the pageProps.json dehydration request?

Background: I'm using react-query in Next.js with hydration. Every time I request a new page, there will be a request before the navigation. The request path is like .../pageName.json?query=xxx which returns the props in getServerSideProps. Question: But the request takes some time to finish, and makes the navigation not smooth. Is there any way to prefetch the pageProps request so that the navigation can be more smooth? Thank you in advance.

3 Replies

foreign-sapphire•3y ago

getServerSideProps is called on every client side transition as well. It's to optimize for consistency. I also think it's not ideal. According to the nextJs team, gSSP was "never meant to seed caches". There are quite some discussions about it in the nextJs repo. next13 app directory "fixes" this because it's a completely different approach. - twitter rant by me: https://twitter.com/TkDodo/status/1558752788393476096 - the github discsussion: https://github.com/vercel/next.js/discussions/19611 here's what we do:

const isClientCall = ctx.req.url?.startsWith('/_next/data/')
if (isClientCall) {
  return { props: { }}
}
// do real gSSP stuff here

const isClientCall = ctx.req.url?.startsWith('/_next/data/')
if (isClientCall) {
  return { props: { }}
}
// do real gSSP stuff here

Dominik 🇺🇦 (@TkDodo)

I can't believe there is no real solution in @nextjs for this: https://t.co/1RltC0OR9O Consider: - You prefetch page 1 of an infiniteQuery on the server - You load more pages on the client - navigate away and back - gSSP will run again, fetch page 1 and overwrite the client cache

Twitter

GitHub

Add option to disable getServerSideProps on client-side navigation ...

Feature request Is your feature request related to a problem? Please describe. Function getServerSideProps runs on every request and there is no way to use apollo existing cache to load data from o...

passive-yellowOP•3y ago

Thank you @TkDodo 🔮 ! Another deep hole in Next.js! I also found some discussions: - https://github.com/vercel/next.js/discussions/11578#discussioncomment-2997 - https://github.com/vercel/next.js/discussions/13105 Looks like this is a long term issue that won't be fixed soon.

const isClientCall = ctx.req.url?.startsWith('/_next/data/')
if (isClientCall) {
  return { props: { }}
}
// do real gSSP stuff here

const isClientCall = ctx.req.url?.startsWith('/_next/data/')
if (isClientCall) {
  return { props: { }}
}
// do real gSSP stuff here

I don't quite understand this snippet. Doesn't this skip all gSSP logic? I thought every pageProps is fetched from clients before the page navigates which is how the gSSP works? Oh I got your point. Do you mean we can skip the subsequent page requests to gSSP on client but the first request remains which is completed on server?

foreign-sapphire•3y ago

Exactly

Gaming

Programming

How do I prefetch the pageProps.json dehydration request?

Did you find this page helpful?