usePathname, useSearchParams, useRouter from ‘next/navigation’)를 사용하여 search와 pagination 기능을 구현해 보았다. CRUD 관점에서 말하자면 invoices 페이지의 “Read”에 해당하는 부분을 구현했다고 볼 수 있다.formData object, including type validation.revalidatePath API.Server Component 내부의 async 함수의 body의 첫번째 줄에 ‘use server’ directive를 쓰면 해당 async 함수는 Server Action이 된다(inline function level). 또한 별개 파일의 맨 위에 ‘use server’ directive를 사용하여 해당 파일의 모든 exports를 Server Actions로 취급하는 방식도 사용 가능하다(module level).
Client Components의 경우 module-level “user server”를 사용하는 액션들만 import 하여 사용할 수 있다. (Server Component에서처럼 inline 방식은 안된다는 것이다..)
출처:
React에서, 우리는 <form> 요소 안에서 action attribute를 사용하여 action들을 invoke할 수 있었다. form element의 action은 자동적으로 native FormData 객체를 받을 것이고, 여기엔 captured data가 포함되어 있다.

form element의 action attribute에 커서를 올려보면 FormData 타입의 formData를 parameter로 가지는 함수 값을 넣어야 한다는 것을 알 수 있다. 타입스크립트 짱.예를들면:
// Server Component
export default function Page() {
// Action
async function create(formData: FormData) {
'use server';
// Logic to mutate data...
}
// Invoke the action using the "action" attribute
return <form action={create}>...</form>;
}
