ayeongjin 님의 블로그

1. 캐시(Cache)란?자주 사용하는 데이터를 저장하여 빠르게 접근할 수 있도록 하는 고속 메모리 또는 저장소를 의미한다.컴퓨터에서는 CPU와 메모리(RAM) 사이의 속도 차이를 보완하기 위해 캐시를 사용한다.캐시는 보다 빠른 데이터 접근을 가능하게 하여 시스템 성능을 크게 향상시킨다.  ✅ 캐시가 필요한 이유캐시는 데이터나 값을 미리 복사해 놓은 임시 저장소이다.데이터를 접근하는 시간이 오래 걸리거나 계산 시간이 오래 걸리는 로직에서 사용된다.캐시가 없다면변경되지 않는 고정 데이터조차 매번 네트워크를 통해 다운받아야 하므로 비용과 성능 문제가 발생한다.불필요한 데이터 요청이 반복되면 데이터 비용이 증가하고 사용자의 로딩 속도가 느려지는 경험을 초래한다.캐시를 사용하면새로고침 시 반복되는 데이터를 네트..

풀 라우트 캐시Next.js 서버에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능입니다. 이 기능을 활용하면 정적 페이지의 로딩 속도를 향상시킬 수 있습니다. 1) Dynamic Page로 설정되는 기준특정 페이지가 접속 요청을 받을 때마다 변화가 생기거나, 데이터가 매번 달라지는 경우 자동으로 Dynamic Page로 분류됩니다. (1) 캐시되지 않는 Data Fetching을 사용할 경우cache: "no-store" 설정 시 Dynamic Page로 분류됨서버 컴포넌트에서만 해당됨 (클라이언트 컴포넌트는 영향 없음) (2) 동적 함수 (쿠키, 헤더, 쿼리스트링)를 사용하는 경우cookies(), headers(), useSearchParams() 등의 함수가 포함되면 자동으로 Dynami..

데이터 페칭 1) Next.js에서 데이터 페칭서버 컴포넌트에서의 데이터 페칭// 서버 컴포넌트에서 비동기 함수 사용 가능export async function Page(props){ const data = await fetch('...'); // 기존의 getServerSideProps, getStaticProps 대체 return ...}클라이언트 컴포넌트에서는 async 키워드 사용 불가 (브라우저에서 문제 발생 가능)Next.js 공식 문서에서는 데이터는 필요한 곳에서 직접 불러오는 것이 최적의 방식이라고 권장 2) 서버 컴포넌트에서 데이터 불러오기 예제서버 컴포넌트는 async 함수로 정의 가능데이터 요청 실패 시 오류 메시지 출력// 컴포넌트 자체가 async function이 될 수 있음//..