처음 만난 Next.js 문서
7.5
마치며
이번 장에서 배운 내용은 아래와 같습니다.
fetch- Next.js는 네이티브
fetchWeb API를 확장하여 서버에서 각fetch요청의 캐싱 및 재검증 동작을 구성할 수 있게 함
- Server Components, Route Handlers, Server Actions에서
async/await와 함께fetch를 사용할 수 있음 - Caching Data
- 서버로부터 받아온 데이터를 캐시에 저장해놓고, 동일한 요청이 왔을 때 다시 서버에 요청하지 않고 캐시에 저장된 데이터를 사용하는 것
- Next.js에서는 기본적으로
fetch에서 반환된 데이터를 Data Cache에 자동으로 캐싱하지 않음
- Revalidating Data
- 최신 데이터를 가져와서 캐싱된 데이터를 덮어쓰는 것
- Revalidating 없이 캐싱된 데이터를 사용하면, 잘못된 데이터를 보여주는 결과를 초래할 수 있음
- Time-based Revalidation
- 시간을 기반으로 재검증하는 방식
- On-demand Revalidation
- 필요한 경우에 직접 재검증을 요청하는 방식
- 다양한 방법을 사용하여 Data Caching을 제외할 수 있음
- Next.js는 네이티브
- Server Actions
- 클라이언트 컴포넌트가 서버에서 실행되는 비동기 함수를 호출할 수 있게 해주는 기능
'use server'지시어를 사용- 비동기 함수의 맨 위에 작성하여 해당 함수를 서버 액션으로 정의
- 파일의 맨 위에 작성하여 해당 파일의 모든
export를 Server Actions로 정의
- 작동 방식
- Server Actions가 정의되면 해당 서버 함수에 대한 참조를 생성하고, 그 참조를 클라이언트 컴포넌트에 전달
- 클라이언트에서 해당 함수가 호출되면 리액트는 서버에 요청을 보내서 그 함수를 실행하고 결과를 반환
마지막 업데이트: 2025년 10월 24일 02시 26분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page