[서버 액션]

JAMEe_·2025년 11월 24일

New NEXT.JS 톺아보기

목록 보기
4/6

서버 액션이란?

서버에서만 실행되는 비동기 함수를 브라우저가 직접 호출
조금 더 간결하고 편리하게 서버측 동작을 정의하는데 적합

async function createReviewAction(){
	"use Server"
    ...
}

return (
	<form action={createReviewAction}>
    	...
    </form>
)

브라우저에서 폼을 제출하면 서버 액션을 요청(요청 주소: 현재 브라우저 주소)하는 request 가 서버로 날라감
서버 액션은 컴파일 결과 특정한 해시값을 갖는 API 로써 생성
request header 에 Next-Action 에 현재 요청하고 싶은 서버 액션 해시값을 함께 요청

그럼 서버 액션의 응답은 어떻게 받아야하나요?

useActionState 는 form 태그에 대한 핸들링 지원

const [state, formAction, isPending] = useActionState(핸들링하려는 액션함수, 폼 상태 초기값);

return(
	<form action={formAction}>
    	...
    </form>
)

다양한 재검증 방식

next-cache 에서 제공하는 revalidatePath 를 이용하면 해당 경로를 재검증하게됨
서버측에서만 호출 가능하여 서버 페이지나 서버 액션에서만 호출 가능
풀 라우트 캐시와 데이터 캐시가 PURGE(삭제) 되고, 새로고침 후 접근하면 Dynamic 하게 그려짐

revalidatePath 에서 제공하는 여러 기법

  1. 특정 경로의 모든 동적 페이지를 재검증
revalidatePath("/book/[id]","page");
  1. 특정 레이아웃을 갖는 모든 페이지 재검증
revalidatePath("/(with-searchbar)","layout");
  1. 모든 데이터 재검증
revalidatePath("/","layout");
  1. 태그 값으로 데이터 재검증
await fetch(
...,
{next: {tags: [`review-{bookId}`]}}
)

revalidatePath(`review-{bookId}`);
profile
안녕하세요

0개의 댓글