any method to use server action for load more data?

You don’t need to create a new function. Just call the server action from your button directly, to get it working

i am using react query to fetch data in server component and pass to client component and even im facing the same error xD
tried JSON.parse(JSON.stringify()) , but it doesnt work. let me know if you solve the error

you can do the same: https://nextjs-forum.com/post/1191210338297839666#message-1191279206039040000v

@B33fb0n3 i trying but still getting the same error

servercomponent.tsx (is a server component which fetches list of products , finds the product with the matching slug and returns to client component through props )

page.tsx (is a client component which gets products and renders it)

and not getting logs either

yea, in your case you try to do this:

    // ...
    <ProductDetails products={matchedProduct} />;

in your server action. You can't do that. First things first: server actions are there to mutate and change data. Not for fetching. Your server components should fetch data. So fetch your products in your server component and remove this server function.

When you want to mutate data, for example when a user adds a product to his cart (mutate the user cart) you can create a server action for it and return the mutated cart (or revalidate by tag for example)

so removing "use server" from serverComponent.tsx should solve the problem right?

no. This would resolve the problem:

Your server components should fetch data

The other text in my message is the explanation why

ok so do i need server action then ? cause not mutating the data
i just want to fetch the products in server component , find the matched prod and send to client comp where i will render it.
do i need server action for this?

no, you don't need server actions to fetch data.

Server Actions = Data Mutation (and other stuff)
Server Components = Data Fetching (and other stuff)
Client Components = Interactivity (and other stuff)

also what is the best way to do that
fetching in server comp is straight forward, using fetch method
but here passing to client is where i am facing prob

cause i read on reddit that server action can replace swr,react query ...

yea, fetch data in server component and pass the relevant data to your client components (or other server components)

they shouldn't replace swr or rq

so if i remove that "use server" , everything should work right?
coz it is then fetching it in server comp and sending to client comp

you can do it like that:

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main>
    <ProductImages images={data.images} />
    <ProductDesc text={data.description} />
...
</main>
}

ok i will try , thanks

@Fire ant what about your problem?

Im using server actions to get next data not from api or something, but from npm library, usually i use this library and create new api as backend to return the json data response, and render using client or server component, but the problem is using api method it always fetch the same data, i need to create new button like onclick and
await getNewData() to retrieve new data, thats why i try to use server actions

Using onclick button requires client component, and from that i got the error about plain object, when rendering data from client

And i cant even see the response from the server actions after i trigger the server actions button, like no log from response or something, just error about plain object

@Fire ant are you able to share the code from this function:

export async function getData() {
  // function logic
}

ok so im not getting that plain obj error
i downgraded to next13 , ps i upgraded to next14 in while i was building my proj

but still not getting the data in frontend

it should look like this

you might want to open a own post. You can ping me

okay

The method is same like fetching data from server component

export async function getData() {
  try {
    const data = await getModuleData(); // get json data
    const get_next = await data.getNextData(); // module function new data
    return get_next; // return the json data
  } catch (error) {
    console.log(error);
    return error;
  }
}

Have you achieve this? using server actions to render new json data in client component?

maybe try not to return the error

export async function getData() {
  try {
    const data = await getModuleData(); // get json data
    const get_next = await data.getNextData(); // module function new data
    return get_next; // return the json data
  } catch (error) {
    console.log(error);
  }
}

Still same, it produce error, Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
at stringify (<anonymous>)