Client side data fetching

[zachrip]

To preface: I'm new to next.js and swr.

In the client side data fetching section it says to "First, immediately show the page without data. You can show loading states for missing data. Then, fetch the data on the client side and display it when ready."

When attempting to do this, swr is still making a call to the backend from the server side, which is never used because it's not waited for by next. This doesn't seem right to me. I know I can disable ssr for components but that doesn't seem to be what the docs are asking me to do. Am I doing something wrong? Can someone show me an example of exactly what the docs are describing?

Thanks!

[samcx]

Is there a minimal reproduction repository you can share with us so we can see where you are using your swr code?

[samcx]

Is this happening in the Production build as well?

[zachrip]

I haven't tested that but I would imagine so. I can try it.

[zachrip]

I tested with revalidateOnFocus disabled and the problem went away - I should've realized sooner but what I was seeing was nextjs hotloading my updates which caused an api request, then swr revalidating when I went to the browser.

@samsisle feel free to remove this discussion, I have my answers 😃

[spavlovic77]

I tested with revalidateOnFocus disabled and the problem went away - I should've realized sooner but what I was seeing was nextjs hotloading my updates which caused an api request, then swr revalidating when I went to the browser.

@samsisle feel free to remove this discussion, I have my answers 😃

@zachrip I have similar issue with my Dependent Fetching. The data is in Console but not rendered on screen. Can you please have a look in my code, it this is the same problem which you have had?

const { data: stakedByStaker } = useSWR('stakedByStaker', ()=> fetcherStakedByStaker(slice, accounts))
const { data: listStaked, error } = useSWR(()=>'listStaked'+stakedByStaker[0].staker, ()=>fetcherStakedFights(stakedByStaker, accounts, web3))

if (error) return

failed to load

if (!listStaked) return

loading...

return (...)

[samcx]

@zachrip I'm glad you were able to figure it out! I remembered going through the same thought process as you, but I didn't have an answer ready for this.

I just remembered that I wasn't seeing the behavior in Production.