what to do if i need to run a fetch within a useEffect?
Answered
Nile Crocodile posted this in #help-forum
Nile CrocodileOP
i think this feature came around when i wasn't using nextjs and am very surprised by this. prolly this is such an easy thing btw sorry for this.
Answered by B33fb0n3
... to fetch data serverside and pass it as props down to the client
66 Replies
@Nile Crocodile i think this feature came around when i wasn't using nextjs and am very surprised by this. prolly this is such an easy thing btw sorry for this.
well... I guess you fetch it within the useEffect then?
Nile CrocodileOP
yeah but the thing is useeffect only works within client components i guess
and async functions work in server components i guess?
@Nile Crocodile and async functions work in server components i guess?
that's also correct
Nile CrocodileOP
but the async functions also work in client?
if you put them in a useEffect, yes. But it's recommended to fetch data serverside and pass it as props down to the client
Nile CrocodileOP
oh ok
@Nile Crocodile oh ok
you can do that?
Nile CrocodileOP
do what?
yeah i know how to use it in a useeffect
@Nile Crocodile do what?
... to fetch data serverside and pass it as props down to the client
Answer
Nile CrocodileOP
umm i guess i'll see 
when will you try?Nile CrocodileOP
now
@Nile Crocodile i think this feature came around when i wasn't using nextjs and am very surprised by this. prolly this is such an easy thing btw sorry for this.
Nile CrocodileOP
i'm not used to new version lol things are a bit weird for me
that's fine. Everyone starts small 🙂
Nile CrocodileOP
🙂
'use client'
async function getData() {
const res = await fetch('https://api.dictionaryapi.dev/api/v2/entries/en/hello')
if (!res.ok) {
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Card(){
const data = await getData();
console.log(data[0].meanings[0].definitions[0].definition);
return(
<div>
{data[0].meanings[0].definitions[0].definition}
</div>)
}this worked btw
that worked? You sure?
Nile CrocodileOP
yeah
no errors because of having a client component async?
Nile CrocodileOP
no errors
And you also get the data, right?
Nile CrocodileOP
bro is this is an unexpected thing lol is something wrong with me
@B33fb0n3 And you also get the data, right?
Nile CrocodileOP
yeah
got it
yea... no ... uhm.. normally you should get this error: https://nextjs-forum.com/post/1254497924201840690#message-1254509718194491412
Nile CrocodileOP
lolllll
But, I guess if it's work 🤷‍♂️ 🤣
If you will have issues with that async/await thing (when getting the error), follow the steps that I provide in the linked thread
Nile CrocodileOP
however somehow i also got this error in console
but come on... the jsx element works somehow
@Nile Crocodile however somehow i also got this error in console
ah yea, that's the error I was expecting
@B33fb0n3 > ... to fetch data serverside and pass it as props down to the client
Nile CrocodileOP
i would leave it as it is normally but let's see if i can remove the error that way
@Nile Crocodile however somehow i also got this error in console
You now have three options:
1. Fetch serverside and pass your data as props down to your client component (recommended)
2. Fetch it inside a useEffect. See here (not recommended): https://nextjs-forum.com/post/1254497924201840690#message-1254510661887590440
3. Fetch it with a client side library if clientside fetching is the only possible way: React query or swr is recommended.
1. Fetch serverside and pass your data as props down to your client component (recommended)
2. Fetch it inside a useEffect. See here (not recommended): https://nextjs-forum.com/post/1254497924201840690#message-1254510661887590440
3. Fetch it with a client side library if clientside fetching is the only possible way: React query or swr is recommended.
Nile CrocodileOP
i choose 1
that sounds great 🥳
Nile CrocodileOP
lets see if i can do it myself
Nile CrocodileOP
import Card from "@/components/card"
// server component
async function getData() {
const res = await fetch('https://api.dictionaryapi.dev/api/v2/entries/en/hello')
if (!res.ok) {
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const dumdata = await getData();
return <main><Card data={dumdata} /></main>
}this is page.js
'use client'
export default function Card({ data }){
console.log(data[0].meanings[0].definitions[0].definition);
return(
<div>
{data[0].meanings[0].definitions[0].definition}
</div>)
}and this is my card.js
wait imma post my folder structure
here it is
you mean this way?
i didn't use any useeffect in this problem
i guess i MUST use useEffect whenever i need to refetch from api?
whenever somestate etc. changes
@Nile Crocodile js
import Card from "@/components/card"
// server component
async function getData() {
const res = await fetch('https://api.dictionaryapi.dev/api/v2/entries/en/hello')
if (!res.ok) {
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const dumdata = await getData();
return <main><Card data={dumdata} /></main>
}
Nile CrocodileOP
another problem... i want to change the word at the end of url(hello, i used it for example). how to change it using useState?
define it in a serverside file then import it? is this the way
@Nile Crocodile i guess i MUST use useEffect whenever i need to refetch from api?
When you want to refetch specific data on events, you can fetch the initial data serverside (and pass it down) and then fetch more (or refetch) clientside. That’s completely fine
Nile CrocodileOP
what do u mean fetch more of refetch clientside?
like, what scenario
@Nile Crocodile another problem... i want to change the word at the end of url(hello, i used it for example). how to change it using useState?
Nile CrocodileOP
so in this scenario i can use a useState for that word and also fetch in that card function?
Imagine having a feed. Fetch the first 10 serverside. The client scroll thought the first 10 posts and click on a button „load more“. The client then fetch more via the client and updates the client state
Nile CrocodileOP
oh ok i think i got it
@Nile Crocodile so in this scenario i can use a useState for that word and also fetch in that card function?
Nile CrocodileOP
so i can fetch the first word -hello in this situation- then fetch another word within that card function?
Yea. Fetch the initial page (initial data) serverside and add more data/update data when something on clientside happens
Nile CrocodileOP
oh ok got itttt finally
thank u dude
u rock
@Nile Crocodile oh ok got itttt finally
Happy to help. Please mark solution