# Server Actions

## Actions
- Called explicitly
- Data is returned

export const action = serverAction$((params: {name: string}) => {
  // add to DB
  return 42;
});


export const Cmp1 = component$(() => {
  return <button onClick$={() => {
    // runs in the server
    const number = await action(); // 42
  }}>
    Click
  </button>
});


export const CmpForm = component$(() => {
  return (
    <Form action={action}>  
      <input name="name">                     
    </Form>                        
  )
});

## Loaders
- Called implicitally
- Data is collected

export const loader = serverLoader$(ctx) => {
  if (isSignin(ctx)) {
      return { name: 'manu' };
  } else {
      return { name: 'anonymous' };
  }
}); 

export const action = serverAction$() => {
  // add to DB
  setCookie(login);
  return true;
}); 

function action() {
  const state = useLoaderState();
  
  const BODY = await fetch(POST);
  {
    action: 42,
    loaders: {
      'fds': 23445,
      '53454'
    }
  };
  
  loc.redo++;
}

export const CmpForm = component$(() => {
  const resource = loader.get();
    
  return (
    <Resource value={resource}
     onResolve={(data) => {
        return ()
        <button
          onClick$={() => {
           const worked = await action({name:'asdf'});
          }}
        >
          {data.name}
        </button>
      )
    }}/>
  )
});