Calling server action on home page to fetch data
Answered
フェイン (Fane) posted this in #help-forum
Hi! I am calling a server action to pass to a Client Component to fill an input with possible choices. It calls an external API to get the data. Is this the intended use for server actions? Is there a simpler or better way to be getting this data into the client component? Here is the code of my main page:
import './styles.sass';
import NewAgentForm from './NewAgentForm/NewAgentForm';
import { getFactions } from './actions';
import CssBaseline from '@mui/material/CssBaseline';
import Provider from './Provider';
export default async function Home() {
return (
<Provider>
<CssBaseline />
<main className='main'>
<NewAgentForm factions={await getFactions()} />
</main>
</Provider>
);
}Answered by Stoyan Paskalev
hey @フェイン (Fane) If you're trying to fetch some data and pass it down to a client component, then just do that inside the Home component
As for the server actions, their purpose is to handle form submissions and data mutations
No need to call a server action when you are already on the server (a.k.a in the server component)
export default async function Home() {
const data = await fetchData() // some function which retrieves the remote data
return (
<component data={data} />
)
}As for the server actions, their purpose is to handle form submissions and data mutations
7 Replies
hey @フェイン (Fane) If you're trying to fetch some data and pass it down to a client component, then just do that inside the Home component
As for the server actions, their purpose is to handle form submissions and data mutations
No need to call a server action when you are already on the server (a.k.a in the server component)
export default async function Home() {
const data = await fetchData() // some function which retrieves the remote data
return (
<component data={data} />
)
}As for the server actions, their purpose is to handle form submissions and data mutations
Answer
Thanks Stoyan. By data mutations, does that mean POST requests to an external API? Or should I also just call fetch for that?
My whole app is just a UI to interact with an external API and automating that interaction. So I fetching lots of data with server actions and passing it to client components. But you are saying, this is not the intended use of server actions (it also really confuses me about the caching).
In my case, would it be better to just learn how to use react-query or something similar?
My whole app is just a UI to interact with an external API and automating that interaction. So I fetching lots of data with server actions and passing it to client components. But you are saying, this is not the intended use of server actions (it also really confuses me about the caching).
In my case, would it be better to just learn how to use react-query or something similar?
for example, basically every button on my app is just a call to a server action on a big list of server actions with lots of repeated code:
every time the component rerenders, these actions (like getShips()) gets called again, and I am hitting API limits all over the page.
@フェイン (Fane) Hi! I am calling a server action to pass to a Client Component to fill an input with possible choices. It calls an external API to get the data. Is this the intended use for server actions? Is there a simpler or better way to be getting this data into the client component? Here is the code of my main page:
import './styles.sass';
import NewAgentForm from './NewAgentForm/NewAgentForm';
import { getFactions } from './actions';
import CssBaseline from '@mui/material/CssBaseline';
import Provider from './Provider';
export default async function Home() {
return (
<Provider>
<CssBaseline />
<main className='main'>
<NewAgentForm factions={await getFactions()} />
</main>
</Provider>
);
}
Hi, from the code on
A server action is when you use the function with form/event handler which will make a POST request to that route
Home, you are calling a function querying data which is fine. A server action is when you use the function with form/event handler which will make a POST request to that route
@フェイン (Fane) every time the component rerenders, these actions (like getShips()) gets called again, and I am hitting API limits all over the page.
since you call
revalidatePath in the server action so it will refetch the data and update the ui in the path, that's why you see getShip being called again