Next.js Discord

Discord Forum

Using Server components on Client Component side

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
I have this application. Where the data is changed on button click. And the data is secured data and that has to be a Server Component
How do I mutate the data based on button click.

#help-forum
#gpt-help
Answered by B33fb0n3
Sure:
### Clientcomponent.tsx
<Button onClick={() => publishPage(forDynamicId)}>Publish</Button>

### actions.ts
'use server'

import {revalidatePath} from "next/cache";

export const publishPage = async (dynamic: string) => {
    // some server stuff
    revalidatePath("/static/" + dynamic);
}
View full answer

5 Replies

@Asiatic Lion I have this application. Where the data is changed on button click. And the data is secured data and that has to be a **Server Component** How do I mutate the data based on button click. <#1007476603422527558> <#1089389297548931182>
B33fb0n3
you can do that by using server actions. They are made to execute code on the server and it's a function, so you can easily put it on your onClick event 👍
Asiatic LionOP
@B33fb0n3 Hey, Thank you for the suggestion. Can you give a very small example. I have no idea how it works.
@Asiatic Lion <@301376057326567425> Hey, Thank you for the suggestion. Can you give a very small example. I have no idea how it works.
B33fb0n3
Sure:
### Clientcomponent.tsx
<Button onClick={() => publishPage(forDynamicId)}>Publish</Button>

### actions.ts
'use server'

import {revalidatePath} from "next/cache";

export const publishPage = async (dynamic: string) => {
    // some server stuff
    revalidatePath("/static/" + dynamic);
}
Answer
Asiatic LionOP
Thank you so much ❤️
B33fb0n3
Happy to help