Server actions for fetching data?
Unanswered
West African Lion posted this in #help-forum
West African LionOP
Why is it not a good idea? How do you handle fetching data from client side?
45 Replies
@West African Lion Why is it not a good idea? How do you handle fetching data from client side?
who says that its not a good idea to use server actions to fetch data?
^^
It's a bad idea to use them to fetch data in server components
For client components go for it (it is a like secondary method tho, if possible always try to keep data fetching in server components)
@West African Lion it's definitely not a usecase. server actions are data mutation and you can do data fetching in the server component directly.
if you still have to do dat fetching from client side use your api route not server actions
@James4u <@301665912296177664> it's definitely not a usecase. server actions are data mutation and you can do data fetching in the server component directly.
Dosent really matter, only diff would be you can't run server actions in parallel
Otherwise go for data fetching from a server action or an api
it's never recommended to be used for data fetching
@James4u https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
West African LionOP
So what’s the solution for fetching data in a client component? An API route handler? But then when I want to fetch the same data from the server side, I would have to create a server action with the same code as the Route Handler? And what really makes it a problem to not fetch data from a server action in a client site environment?
well, you concern about having duplicated fetching logic, right?
yeah, you can abstract that logic into util function - but that's not called server action
// your util function: NOT Server Action
export async function getData() {
// your fetching logic
}
// your api route: In case you want client side data fetching
export async function GET(request: Request) {
// use your util function
const data = await getData();
return data;
}
// your server component: You want server side data fetching!!!!
export async function YourServerComponent() {
const data = await getData();
// consume your data
return <div>{JSON.stringifiy(data)}</div>
}@West African Lion let me know if you still have any questions!
@James4u <@301665912296177664> it's definitely not a usecase. server actions are data mutation and you can do data fetching in the server component directly.
you're right, thats the official defintion for server actions
but somehow server actions follow the same logic as fetching in a server component
same possibilities
I could export a "server action" to use them in my server component
so I've a more readable code
result will basically the same, except that I can directly pass data from a client component to the server, to run the request
I wouldn't basically expose my server api and can just run my API locally on my server, without exposing the port or something else
which is a really good case for me, to use server actions to fetch data
Cuban Crocodile
Fetch data on the server if needed.
If you want to fetch data on the server you can create an action.ts file, add your function inside and call it in your code. Don’t forget to add “use server” in that action.ts file
Server actions are usually used for data mutation.
Also I don’t think you’ll have to fetch everything on the server. But it depends on what you want to do so…
If you want to fetch data on the server you can create an action.ts file, add your function inside and call it in your code. Don’t forget to add “use server” in that action.ts file
Server actions are usually used for data mutation.
Also I don’t think you’ll have to fetch everything on the server. But it depends on what you want to do so…
@Cuban Crocodile Fetch data on the server if needed.
If you want to fetch data on the server you can create an action.ts file, add your function inside and call it in your code. Don’t forget to add “use server” in that action.ts file
Server actions are usually used for data mutation.
Also I don’t think you’ll have to fetch everything on the server. But it depends on what you want to do so…
Cuban Crocodile
The function inside action.ts file will make the request to the api route and return either the data or thrown an error
@necm1 same possibilities
well, I didn't meant possibility here, to dig a bit more I want to clarify term
In my story
Ofc, data fetching can be happen inside server action before or after data mutation but using server action for server side data fetching for initial data show (ofc without data mutation) is correct usage? I didn't even try that though.
data fetchingIn my story
data fetching is the process to show the initial data from OP's problem.Ofc, data fetching can be happen inside server action before or after data mutation but using server action for server side data fetching for initial data show (ofc without data mutation) is correct usage? I didn't even try that though.
@James4u well, I didn't meant possibility here, to dig a bit more I want to clarify term `data fetching`
In my story `data fetching` is the process to show the initial data from OP's problem.
Ofc, data fetching can be happen inside server action before or after data mutation but using server action for server side data fetching for initial data show (ofc without data mutation) is correct usage? I didn't even try that though.
nah, the last part would be a crazy use of server actions
@necm1 nah, the last part would be a crazy use of server actions
yeah, that's why I say server actions are not for data fetching.
Cuban Crocodile
@James4u I found this on X . Maybe it can help you too
https://x.com/sebastienlorber/status/1816061889576628687?s=46
https://x.com/sebastienlorber/status/1816061889576628687?s=46
@Multiflora rose seed chalcid can you please clarify this?
@James4u <@712358149494931619> can you please clarify this?
can you remind me again why you pinged lee for clarification?
@West African Lion Why is it not a good idea? How do you handle fetching data from client side?
just have a controller class where u have ur actual fetch logic
u can then use route handlers to fetch data from clientside
but in most cases u dont actually fetch data on the clientside, if u use nextjs u typically do that within your server components and pass the data down
now if the data is dynamic and can be changed on the clientside u would have the props passed to your clientside component saved in a useState
from there u can modify it on the clientside
now you have 3 way to mutate data on the clientside:
1 way: U mutate your useState data from a api route
2 way: U mutate your cached ssr rendered data using revalidatePath with a routeHandler
3 way: U mutate your cached ssr rendered data using serverActions using revalidatePath
1 way: U mutate your useState data from a api route
2 way: U mutate your cached ssr rendered data using revalidatePath with a routeHandler
3 way: U mutate your cached ssr rendered data using serverActions using revalidatePath
@Cuban Crocodile <@970430299014041630> I found this on X . Maybe it can help you too
https://x.com/sebastienlorber/status/1816061889576628687?s=46
“Nevertheless” there is important. It is possible, but you should not do it.
Server actions cannot run in parallel. If your page has two unrelated components fetching data at the same time, using server actions to fetch data in both will lead to bad performance since one fetch is queued and only runs when the other finishes.
Do not use server actions to fetch data.
Server actions cannot run in parallel. If your page has two unrelated components fetching data at the same time, using server actions to fetch data in both will lead to bad performance since one fetch is queued and only runs when the other finishes.
Do not use server actions to fetch data.
Multiflora rose seed chalcid
There might be a server actions like solution for
GET requests in the future, but yeah, for now we do not recommend it.Yellow-legged Gull
tRPC for fetching can work
includes tanstack query as a bonus
perfect for client-side fetching
@joulev “Nevertheless” there is important. It is possible, *but* you should not do it.
Server actions cannot run in parallel. If your page has two unrelated components fetching data at the same time, using server actions to fetch data in both will lead to bad performance since one fetch is queued and only runs when the other finishes.
Do not use server actions to fetch data.
Arboreal ant
Is this also the case in parallel routes?
It has nothing to do with parrallel routes. The client (your browser) only makes one request through the server actions directive at a time. No matter what configuration you’re in.