• URL Search Params와 Next.js API(usePathname, useSearchParams, useRouter from ‘next/navigation’)를 사용하여 search와 pagination 기능을 구현해 보았다. CRUD 관점에서 말하자면 invoices 페이지의 “Read”에 해당하는 부분을 구현했다고 볼 수 있다.
• 이제 Create, Update, Delete 기능을 추가해보자. (Mutating data)
• In this chapter... Here are the topics we’ll cover
  • What React Server Actions are and how to use them to mutate data.
  • How to work with forms and Server Components.
  • Best practices for working with the native formData object, including type validation.
  • How to revalidate the client cache using the revalidatePath API.
  • How to create dynamic route segments with specific IDs.

What are Server Actions?

• React Server Actions는 비동기 코드를 서버에서 직접적으로 실행시킬 수 있도록 해준다. 따라서 Server Actions를 사용하면, 더이상 데이터를 mutate하기 위해 API endpoints를 만들 필요가 없다. 대신, 서버에서 실행되는 비동기 함수를 작성하고, 클라이언트나 서버 컴포넌트에서 이들을 호출(invoke)할 수 있다.
  • 좀 헷갈리는 부분이 있다: 기존에도 그냥 Server Component에서 비동기적인 data fetching을 했었는데, 굳이 Server Actions가 왜 필요한거지?
• Server Actions는 앱의 보안 관점에서도 중요한 역할을 할 수 있다. Server Actions는 POST requests, encrypted closures, strict input checks, error message hashing, host restrictions등의 기술을 통해 앱의 안정성을 확보할 수 있다. (이런 기술들 덕분에 공격으로부터 보호하고, 데이터를 지키고, authorized access를 요구할 수 있게 된다)
• 사용방법:

  • 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 방식은 안된다는 것이다..)

  • 출처:

    Data Fetching: Server Actions and Mutations

Using forms with Server Actions

• 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>;
  }
  

  • Server Component에서 Server Action을 invoke하는 것의 장점은 progressive enhancement이다 - 클라이언트에서 JavaScript가 disabled되어도 여전히 form이 작동한다는 것이다.

Next.js with Server Actions

• Server Actions는 또한 Next.js caching과 깊게 통합integrated되어 있다고 한다. Form이 Server Action을 통해 제출submit되면, action을 데이터 변경mutate용으로 사용할 수 있을 뿐만 아니라, revalidatePath나 revalidateTag와 같은 API를 사용하여 관련 캐시를 revalidate할 수도 있다고 한다. (무슨말인지 잘 모르겠군. 해봐야 알거 같다)

Quiz

• 정답: