Next.js Discord

Discord Forum

Difference between server actions vs server components

Answered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
Hey! I have a grasp difference between the two, I know server components are components rendered on the server. What I don't entirely get is server actions, I'm assuming a server action is when you use 'use server'. Does that string definition at the top of the file explicitly mean that it will make a fetch request to the server or how does that work? The reason I'm asking is that in server components I can call a function that does what I need, for example getting a specific post and it'd work without server actions. Why shouldn't I use server actions if its still going to be something done on the server?
Answered by Arinji
its quite simple actually.. server components is just react on the server, its good wherein you can do stuff like fetching data on the server and send the entire html to the client.

Server actions aka the things you make with "use server" are api routes but with improved developer experience. You can pretty much forget server actions and just use route handlers instead of them. Server actions just provide dx benefits like typesafety, instant cache invalidation etc.

So basically server actions are a certain type of route handlers (POST requests) which answers your other question of why not use it to fetch data.. you dont fetch (GET) data in a POST handler, hence you dont use server actiosn to fetch and render data
View full answer

6 Replies

Giant panda
There can be some confusing in how similar they are in name, but the two are actually quite different. a server component is like any other react component that is rendered on the server instead of the client, which can improve performance, page speed etc. meanwhile a server action would be a .js or .ts file you place in a seperate directory from your app and components directory. in the .js or .ts file you place funtions that would perform some kind of task on the server like creating a task and sending it to a database connected to your project. For example here is a server action that takes data from a form in a client component and on submit would send it to the database: 
 export async function createTask(
    text: string,
) {
    try {
        const task = await prisma.task.create({
            data: {
                text,
            },
        });

        return task;
    } catch (error) {
        console.error('Error creating task:', error);
        throw new Error('Could not create task');
    }
}
Then allow for users to input the data you need and when users click your submit button the action would take over and send formData to the database 
return(
    <form action="createTask">
      <input type="text"></input
<button type="submit>Submit </button>
Arinji
its quite simple actually.. server components is just react on the server, its good wherein you can do stuff like fetching data on the server and send the entire html to the client.

Server actions aka the things you make with "use server" are api routes but with improved developer experience. You can pretty much forget server actions and just use route handlers instead of them. Server actions just provide dx benefits like typesafety, instant cache invalidation etc.

So basically server actions are a certain type of route handlers (POST requests) which answers your other question of why not use it to fetch data.. you dont fetch (GET) data in a POST handler, hence you dont use server actiosn to fetch and render data
Answer
Arinji
@Netherland Dwarf
Netherland DwarfOP
Ahh okay got it, thanks to the both of you!
Original message was deleted
Arinji
boop