Next.js Discord

Discord Forum

Not able to understand Server Actions & when to use it

Unanswered
Parson Russell Terrier posted this in #help-forum
Open in Discord
Parson Russell TerrierOP
My doubt is this => if i'm on server component than there is no need to use server actions as we can do this 
const Dum = async () => {
cosnt data=  await prismaDb.store.findMany({...})
  return (
    <></>
  )
}


but if i'm on client component than if i use server actions like this 
const Dum = async () => {

    const fetchStores = async ()=>{
        "use server"
        const data = await prismaDb.store.findMany(...)
        return data
    }

  return (
    <></>
  )
}



but in this case how can i store the data in state?? as the fetchStores func will be running on the server??

19 Replies

Parson Russell TerrierOP
Can anyone please give me small summary about server actions & when to use it & some of its applications
i'm not able to understand it properly
Transvaal lion
I am also curious about this
Cuvier’s Dwarf Caiman
I recently came across a scenario where I really needed to use a Server Action to get around CORS (Cross Origin Resource Sharing). I was making an API call from a component that was getting blocked by browser security. Using a server action, my API calls now run on the server and not the browser.
Parson Russell TerrierOP
@Cuvier’s Dwarf Caiman can you tell me how can i convert this code in client components and use server actions to fetch data??
This is server component, how can fetch data and pass to child component in client components ???

import getBillboard from "@/actions/get-billboard";
import getProducts from "@/actions/get-products";
import ProductList from "@/components/product-list";
import Billboard from "@/components/ui/billboard";
import Container from "@/components/ui/container";

const HomePage = async () => {
  const products = await getProducts({ isFeatured: true });
  const billboard = await getBillboard("495c9364-22ba-40de-bb61-940e05cc1c46");

  return (
    <Container>
      <div className="space-y-10 pb-10">
        <Billboard
          data={billboard}
        />
        <div className="flex flex-col gap-y-8 px-4 sm:px-6 lg:px-8">
          <ProductList title="Featured Products" items={products} />
        </div>
      </div>
    </Container>
  )
};

export default HomePage;
Saltwater Crocodile
Personally if I'm getting data from the server I like to make API calls and have the server logic on the API route so none of that is visible in the client. It also helps for logging and permissions
and we can also use server actions, but how can i get value from this server actions and pass data as a prop to the child component (just an example)
const Dum = async () => {

    const fetchStores = async ()=>{
        "use server"
        const data = await prismaDb.store.findMany(...)
        return data
    }

  return (
    <></>
  )
}
according to me 
const Dum =  () => {
    const [data , setData] = useState([])
    const fetchStores = async ()=>{
        "use server"
        const data = await prismaDb.store.findMany(...)
        return data
    }

  return (
    <ChildCom data={data}/>
  )
}


but how can i set data to state after fetching?? 

since this function will be executed on the server than how can i set value into the data state??
    const fetchStores = async ()=>{
        "use server"
        const data = await prismaDb.store.findMany(...)
        return data
    }
Saltwater Crocodile
I'm not sure if this is the right answer to specifically your situation because I just recently came back to next.js after quite a break.

However, I'm still using useEffect in my client code to fetch data and it still seems to work in the latest versions. I use taht to make my API calls and then using ContextProviders I can pass the data back down to the DOM.

Again, not sure if this is the right answer, but if you are using this in client code you won't even need to add "use server" to do it
Lionhead
My personal rule of thumb (on larger projects) - use server actions primarily for mutations (updates), and read server side when loading a page. Use query string parameters if you want to model say a page with filtering instead of a useEffect and client side query.

You can look at server actions as a way to simplify the plumbing for internal API calls. Instead of having a backend call to your own API.

To answer the original question / useEffect(..,[]) + setState, but that's not great coding in a next.js app.
Lionhead
Also always keep caching in mind when using server actions for queries
Cuvier’s Dwarf Caiman
@Parson Russell Terrier The code you posted is already in line with how i'm doing my forms. getBillboard and getProducts are offloaded to another file which should have 'use server;' at the top. The only thing you're missing is to put a 'use client;' at the top of your HomePage component to make it a client component.
@Saltwater Crocodile Thanks for this info...I was surprised to see useEffect still working after coming back. I'm using it now, but will refactor down the line when I'm strengthening my code. 🙂
Parson Russell TerrierOP
i also use useEffect for api calls / but wanted to learn new things like server-actions,
most of the yourube videos are based on using server-actions on forms, and that confused me a lot
@Cuvier’s Dwarf Caiman @Lionhead
Saltwater Crocodile
Instead of setting data directly you want to call the setData helper:

const fetchedData = await prismaDb.store.findMany(...)
setData(fetchedData)


I'm not sure if there is anything else missing as I'm still getting caught up on server actions as Octagon called out.