import pageData... VS pageData = await fetchPageData()...
In a SSR nextjs 13 app directory situation I though it was a simple and good idea to import the data and filter it for each page but I have experienced some stalls of the app that never resolves. Now I am rebuilding it using fetch-calls instead.
Any angles on that?
7 Replies
you should fetch data where its needed and let next deduplicate it
see: https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
Data Fetching: Data Fetching Patterns
Learn about common data fetching patterns in React and Next.js.
Thanks. It felt better generally after changing to using fetch for getting the data everywhere but I have something that makes the page freeze up after a couple of navigations.
The data that drives the page is a json I keep in the nextjs filesystem.
Should that work?
I'm staging it here. The freeze occures when going between the /services subpages
https://temp-freelancer-temp.vercel.app/
@whatplan Could you see what I'm doing wrong if I shared the repo?
seems like a useEffect bug
just is the most likely reason for it to weirdly freeze like that
Could you see what I'm doing wrong if I shared the repo?yes I will take a look
GitHub
GitHub - parameter/temp-freelancer-temp
Contribute to parameter/temp-freelancer-temp development by creating an account on GitHub.
I had a client-part for kicking off a masonry layout but I threw it away so there are no client components left
Wait. I found one more client component, let's see now
Now there are no more client-components and it's running smooth.
The last client component was <ContactMe />
Any idea what I was doing there that made it freeze?
it looks like the '/services subpages' freezing is gone at least for me
where do you notice the issue with contact me
I took it off for now and this is why it is running smoothly, as it seems.
<ContactMe /> has no useEffect and it just freezes with it there so no idea. Hehe.
@whatplan Many thanks for getting me in the right direction.
Putting the client-component in a layout seems to have solved it.
Any ideas why this pattern works?