Next.js-13-신기능-Server-Actions
2023-05-19
Next.js 13 버전의 새로운 기능인 Server Actions 에 관해 정리한 포스팅 입니다
Server Actions
Next.js 13.4 버전 부터는 실험적 기능인 Server Actions가 추가되었습니다
이 기능은 클라이언트 컴포넌트와 서버 컴포넌트 간의 중간계층 API의 추가없이
직접 서버 데이터를 변형 시킬 수 있는 기능입니다
예시 코드
Server Actions를 사용하기 위해서는 함수 안에 ‘use server’ 지시자를 최상단에 넣어 주면 된다
지금 까지 nextjs에서 form action을 넣어 주기 위해서는 route handler와 같은 중간 계층 API가
필요로 했는데 위 코드와 같이 use server를 사용한다면 간단하게 server의 데이터를 변형 할 수
있게 된다
Server Actions는 ‘use server’ 지시문자를 파일 최상단에 놓음으로써
별개의 파일로 작성 할 수도 있다
또한 이 기능은 ISR(Incremental Static Regeneration) 와의 통합이 가능하도록 설계 되었다
다음 코드를 보자
revalidateTag 는 string 값으로 들어온 태그값과 매칭되는 캐시 데이터를 재검증 하는 함수이다
revalidateTag('posts'); 는 posts태그를 가진 캐시 데이터를 다시 캐싱하는데 위 코드의 경우
await fetch('https://...', { next: { tags: ['posts'] } }); 코드를 다시 캐시한다
이런식으로 데이터의 변경후 페이지 다시 렌더링 또는 리디렉션이
한 번의 네트워크 왕복으로 발생할 수 있다
현재 Server Actions는 실험적 기능이기에 next.config.js에 다음과 같은 설정을 추가 해야만 한다
그 외에 공식문서에 더 자세하게 나와있다
