Next.js Discord

Discord Forum

Prefetching dynamic page and its "dynamic" content

Answered
Siamese Crocodile posted this in #help-forum
Open in Discord
Siamese CrocodileOP
HI. I am using next 14 and I've dynamic pages. When you first enter the app and see the link to /users page which is dynamic, nextjs will automatically prefetch all the static data that it can so everything thats rendered inside some kind of suspense - loading.tsx or <Suspense />. Thats how the users page look like. It renders instantyl and shows the fallabck because the dynamic part uses searchParams.

Can we somehow make next assume that if the url is /users there are no params and it can prefetch the whole page whenever we see the link? So first navigation to /users is instant even without this suspense?
Answered by Siamese Crocodile
You only need to add explicit prefetch={true}
View full answer

44 Replies

Jesse
So, what you're saying is that you want your /users page to have all it's html and js and fetch stuff loaded as soon as a link to /users appears.
@Siamese Crocodile
Siamese CrocodileOP
Yes
I'd like to fetch this <UsersTable /> withhout search params like it is in the link
So it doesnt fetch after navigation
Thats its content
So if the link looks like this /users there is no need to wait with the data fetching untill we navigate
We could prefetch the data
Jesse
I get what you're saying I'm creating a test project so I can see the default Next behaviour since I know it tries to prefetch everything
Siamese CrocodileOP
Sure, lmk if you find a solution 🙂
Because for me it prefetches only the static part
So h1 and so on
Only this part to be exact
And the content inside suspense's fallback
Jesse
Don't think it's possible
I've done my own testing. Used #gpt-help. Used [ChatGPT](https://chat.openai.com) and also [Perplexity](https://perplexity.ai) on CoPilot mode which surfs the whole web. And there's no optimal solution
Best you can do is fetch it on the page with the link and use something like IndexDB to carry it through pages.
Siamese CrocodileOP
:C
I've tried with unstable_cache
And I used the getUsers function on the home page
then /users had all the data withoyt additional fetch but this way search and pagination do not work
Jesse
Yeah it’s annoying, hope you find a workaround
Siamese CrocodileOP
There is also
I will try it
i could run getUsers on the home page and then it should work
Jesse
Good luck
Tell me if it works
Siamese CrocodileOP
@Jesse
Jesse
yeah
Siamese CrocodileOP
You only need to add explicit prefetch={true}
Answer
Siamese CrocodileOP
Then next fetches even the dynamic data
for the first render
Jesse
oh nice
I thought prefetch was set to true by default for link components
Siamese CrocodileOP
it defaults to null
and the behaviour differs in the static / dynamic rendering
@Siamese Crocodile You only need to add explicit prefetch={true}
Jesse
mark this as answer then
Siamese CrocodileOP
idk how 😄
Original message was deleted
Jesse
here @Siamese Crocodile