server component not refetching on navigation
Answered
Clay-colored Robin posted this in #help-forum
Clay-colored RobinOP
When trying to fetch the latest like items from a server component in next, thats the only data that will show until I manually refresh the page. When navigating away and returning, I want the data to be refetched but it doesn't - when using an anchor tag over Link it works
I am using firebase, not the usual fetch
I am using firebase, not the usual fetch
Answered by Clay-colored Robin
Ive added it to a useEffect on pathname change and it seems to have fixed it actually
12 Replies
@Clay-colored Robin When trying to fetch the latest like items from a server component in next, thats the only data that will show until I manually refresh the page. When navigating away and returning, I want the data to be refetched but it doesn't - when using an anchor tag over Link it works
I am using firebase, not the usual fetch
thats due to the router cache. you need to clear it by
router.refresh() when you navigatesomething like
<Link onClick={() => router.refresh()}>Clay-colored RobinOP
Tried adding but still no luck
Using router off useRouter
Using router off useRouter
@Clay-colored Robin Tried adding but still no luck
Using router off useRouter
make a [minimal reproduction repository](https://l.joulev.dev/mrr)
Clay-colored RobinOP
Ive added it to a useEffect on pathname change and it seems to have fixed it actually
Answer
Clay-colored RobinOP
Ill stick with this for time being and look into it again in the morning, thanks for your help @joulev !
if you use server components to fetch the data from backend ...you dont require loading effect at all. why you are using suspense here and why do you want a fallback in server component? Its not require at all. Server component fetches data instantly if your backend code is written in a good way.
Clay-colored RobinOP
So the page is a child from this layout - and now I am calling router.refresh() on page navigation I am seeing the loading UI for that section of the page - I am calling firestore for the fetch - would you set this up another way? @bscdev#1145
Its only part of the page
convert the parent component to a server component. Then keep the same strategy for child too.
Clay-colored RobinOP
both are server components
So why do you want to implement suspense and loading components in layout(server comp) when loading in server component is instantaneous. you can still implement the loading in pages as per nextjs app router documentation, suspense is not required.