Theo's Typesafe Cult•5mo ago

I still don´t get server actions

This might be a shallow question but I still don't get server actions comprehensively: I have this server action that just queries all car records from my db: - Then I call it from a server component. - And then I call this server component from a client component. But I keep getting an error "async/await is not yet supported in Client Components, only Server Components." despite the fact I'm not using any of that inside my client component Should I use useEffect to fetch data like in the good old times?

9 Replies

Neto•5mo ago

Server actions are akin to post requests or mutations in general Being able to fetch data directly into the component is a basic rsc usage The rules around rsc with server components are client components are super murky and weird On the first image, do you have a “use client” at the top of the file?

alfilo•5mo ago

At the one with the vehicleCataloge yes, i have "use client" so server actions are just for mutations inside forms, aren't they? If i want to fetch data I can do it with a regular function

Neto•5mo ago

forms + buttons i need to check, but i feel like you can not use a server component inside a client component

alfilo•5mo ago

thanks buddy

michaeldrotar•5mo ago

The VehicleDisplay component needs "use server" Since it doesn't have either indicated, it inherits from whatever is using it - client in this case, causing the error about using async in a client component

Neto•5mo ago

- At same level they work
  - Main (page.tsx)
    - ServerComponent 
    - ClientComponent

- Server component doesn’t work inside a client component
  - Main (page.tsx)
    - Client Component
      - Server component

- Client component can be a inside a server component
  - Main (page.tsx)
    - Server Component
      - Client component

- Server component can be a inside a client component, if you pass as a children
  - Main (page.tsx)
    - Client component
      - Server component (children of client component)

- At same level they work
  - Main (page.tsx)
    - ServerComponent 
    - ClientComponent

- Server component doesn’t work inside a client component
  - Main (page.tsx)
    - Client Component
      - Server component

- Client component can be a inside a server component
  - Main (page.tsx)
    - Server Component
      - Client component

- Server component can be a inside a client component, if you pass as a children
  - Main (page.tsx)
    - Client component
      - Server component (children of client component)

deforestor•5mo ago

- Client component can be a inside a server component

Can you explain this one? Does that simply mean using a client component inside the server component?

Neto•5mo ago

yep

export async function MyServerComponent(props) {
  const data = await Promise.resolve(10)

  return (
    <>
      <p>Server component: {data}</p>
      <SomeClientComponent/>
    </>
  )
}

export async function MyServerComponent(props) {
  const data = await Promise.resolve(10)

  return (
    <>
      <p>Server component: {data}</p>
      <SomeClientComponent/>
    </>
  )
}

deforestor•5mo ago

Oh ok easy

Gaming

Programming

I still don´t get server actions