한입 -6

Server Action(서버 액션)

• 브라우저에서 호출할 수 있는 서버에서 실행되는 비동기 함수
  ex) form 태그를 이용한 서버와의 통신
• 장점: 코드가 간결하다, 서버측에서만 실행되기 때문에 보안상 민감하거나 중요한 데이터를 다룰 때 유용하다.

async function createReviewAction() {
    'use server';
  }

  return <section>
    <form action={createReviewAction}>
      <input name="content" placeholder="리뷰 내용" />
      <input name="author" placeholder="작성자" />
      <button type="submit">작성하기</button>
    </form>
  </section>

데이터 변경 후 업데이트되는 기능

• revalidatePath 를 사용할 경우 페이지 전체가 새로 업데이트되며, 중간에 cache 기능이 있더라도 무시된다.
• 풀 라우트 캐시도 작동하지 않는다.

revalidatePath(`/book/${bookId}`);

다양한 재검증 방식 살펴보기

1. 특정 주소의 해당하는 페이지만 재검증

revalidatePath(`/book/${bookId}`);

2. 특정 경로의 모든 동적 페이지를 재검증

revalidatePath(`/book/[id]`, 'page');

3. 특정 레이아웃을 갖는 모든 페이지를 재검증

revalidatePath('/(해당 레이아웃이 포함된 폴더명)', 'layout');

4. 모든 데이터를 재검증

revalidatePath('/', 'layout');

5. 태그 기준, 데이터 캐시 재검증(데이터 캐시의 종류)

revalidateTag(`review-${bookId}`);

클라이언트 컴포넌트에서의 서버 액션

• useActionState 훅을 사용해 form 태그를 관리함
• useActionState(핸들링 하려는 컴포넌트, 상태의 초기값)