'use server' within server components

[Nicky-Sa]

Hello everyone. I have a question about Next.js "use server" directive.
I know that we can have server actions in 2 ways:

1. In a separate file marked with 'use server'
2. inside of a server component, at the top of a function.

What I don't understand is in what situation we might need to use the second way? If we're in a component, either we want to get or post data. In server components, if we're getting data, we just use the plain fetch with async/await pattern, no server action needed. Also, in server components, we can't have user interaction, so we can't post data based on user input. Again, no need for server action!
Then when can we declare a function to run on server? Isn't the component already running on server?

[sofly]

@Nicky-Sa Hello. I think you can use the second approach when you don't want to move the server function to another module and when you don't want to import the server function directly from a client component.

import { Button } from './button';
import { Link } from './link';

interface Props {
  searchParams: {
    filter: string;
  };
}

export default function Page({ searchParams: { filter } }: Props) {
  async function doSomeAction() {
    'use server';

    console.log('do something');
  }

  if (filter) {
    return <Link onClick={doSomeAction}>Click me</Link>;
  }

  return <Button onClick={doSomeAction}>Click me</Button>;
}

It's nice that you don't have to create a wrapper for the link and button every time you need to import a server action when you want to pass server actions to client components. Does it make sense?

[Nicky-Sa]

I don't think this pattern is correct. You're using onClick in a server component which isn't allowed. If you mark the Page as client component, then you can't use the 'use server', thus, still no use.

[sofly]

@Nicky-Sa I'm using onClick in client components: Link and Button are client components. It's allowed. See docs:

[Nicky-Sa]

Yeah I'm aware of that, but you can only invoke a client component inside of a server component. Writing "onClick" in server is not allowed. If you try to run the code and click, you'll get an error.

[sofly]

@Nicky-Sa documentation says to us that we can only create and pass a server action to a client component, and from the client component call the server action. It's not possible to run the server action in the server component.