들어가며

안녕하세요 IT 비즈니스 파트너 똑똑한개발자에서 프론트엔드 개발을 하고 있는 손은경입니다 ☺️

개발을 보다 효율적으로 운영하기 위해 개인적으로 스터디 문서를 작성하고 있는데요, 팀원들과 가장 많은 이야기를 나누었던 주제들 중심으로 하나씩 포스팅을 해보려고 합니다:) 이번 포스팅에서는 Next.js 를 사용하면서 직접 경험한 지식들을 소개해보려고 합니다. 들어가기에 앞서 Next.js에서는 두가지 App Router와 Page Router가 있는데요. 오늘 주로 다룰 내용인 App Router가 Next.js 13.4 버전부터 보다 안정적인 버전으로 변경되었습니다. 이를 바탕으로 본 글에서는

1. Page Router보다 빠른 렌더링 속도 달성 하는 방법
2. 데이터 캐싱을 통한 API 호출 비용 절감 방법
3. 사용자 경험 향상을 위한 스킬

위의 3가지 내용을 주로 다뤄보려고 합니다.

Fetching

개인화 되지 않은 요청

개인화 된 요청

Caching

Data Cache

• Next.js 에서는 서버 요청 및 배포 전반에 걸쳐 fetch 요청에 대한 결과를 유지하는 데이터 캐시가 내장되어 있습니다.
• 이 데이터 캐시는 클라이언트 캐시가 아닌 서버 캐시를 의미합니다.

Duration

Revalidating

• revalidate 요청이 들어오면 Vercel 인프라의 게이트웨이에서 서버리스 함수를 호출하여 revalidate를 실행하고 새로운 데이터를 반환합니다.

Time-Based

On-Demand