Caching

Caching

• 캐싱 전략은 웹 애플리케이션의 성능을 향상시키고 서버 부하를 줄이며 사용자 경험을 개선하는 데 매우 중요하다.
• 매번 데이터베이스와 상호작용하는 횟수를 줄여 효율적인 관리가 가능함(ex: metadata..)

nextCache

변경파일

• app/(tabs)/home/page.tsx
• app/products/[id]/page.tsx
• components/product-list.tsx(스크롤 주석처리 함)

revalidate

• { revalidate: 60,}: 최초 데이터를 가져오는 함수를 호출하고 60초 동안은 cache안에 있는 데이터를 return. 60초 마다 갱신이 아니라 새로운 요청이 들어온 시점이 60초가 지난 상태라면 다시 함수 호출

활용 사례:

• 주기적으로 업데이트되는 데이터에 적합하다.
• 예를 들어, 뉴스 사이트의 최신 기사 목록을 60초마다 갱신하여 최신 기사를 제공하면서도 서버 부하를 줄일 수 있음

변경파일

• app/(tabs)/home/page.tsx

revalidatePath

• 요청 했을 때 데이터를 새로고침하는 방법
  1. URL을 타겟팅 하는 방법 : 많은 제어권을 가질 순 없지만 제일 간편함

변경파일

• app/(tabs)/home/page.tsx

활용 사례:

• 특정 경로의 데이터가 자주 변경되는 경우에 사용한다.
• 예를 들어, 특정 상품 페이지를 새로 고침하여 최신 재고 정보를 제공할 때 유용

revalidateTag

1. Tag를 사용해서 새로고침하려는 cache를 더 구체적으로 지정할 수 있다.
   • tag를 가진 cache만 새로고침된다. 이름은 유니크하지 않아도 됨

변경파일

• app/products/[id]/page.tsx

활용 사례:

• 동일한 데이터를 여러 경로에서 사용할 때 유용하다.
• 예를 들어, 여러 페이지에서 공통으로 사용되는 사용자 프로필 데이터를 태그로 관리하여 한 번에 새로 고침할 수 있다.

fetch Cache

• fetch Cache는 데이터 페칭 시 캐시를 활용하여 서버 요청을 최소화하고 성능을 향상시킨다. 이는 특히 외부 API 호출을 빈번히 할 때 유용하다.

변경파일

• app/products/[id]/page.tsx

활용 사례:

• 외부 API에서 데이터를 가져오는 경우에 사용합니다.
• 예를 들어, 외부 날씨 API를 호출하여 날씨 정보를 캐싱하고, 특정 시간 동안 동일한 데이터를 제공할 때 유용합니다.

Production Cache

• npm run build : production으로 프로젝트를 build하면 Next.js가 server-side렌더링을 하고 static page를 export한다는 의미. 어떤 것이 dynamic인지 감지하고 어디에 있는지 알려줌
• static과 dynamic의 차이 : “페이지를 누가 보는지에 따라 내용이 달라지는가?”
• npm run start : production mode로 서버를 구동하겠다는 의미

활용 사례:

• 프로덕션 환경에서 성능을 최적화할 때 사용한다.
• 예를 들어, 블로그 게시물과 같은 정적 페이지와 사용자 대시보드와 같은 동적 페이지를 모두 포함하는 애플리케이션을 구축할 때 유용하다.

Route Segment Config

• Next.js가 모든 스크린의 route를 cache하는 방법
• force-dynamic: static화면을 실시간 데이터를 가져와야 하는 경우 dynamic으로 변경
• revalidate : 특정한 시간에 페이지를 재검증하도록 지시할 수 있음(✔︎production mode에서 빌드했을 때 작동 함)
• 도큐먼트 참고
  

변경파일

• app/(tabs)/home/page.tsx
• app/products/[id]/page.tsx

활용 사례:

• 동적 데이터와 정적 데이터를 모두 포함하는 페이지를 구성할 때 사용한다.
• 예를 들어, 대시보드 페이지에서 실시간 데이터를 표시하면서도 일정 시간 동안 캐시된 데이터를 제공할 때 유용함

generateStaticParams

• 사전 렌더링(prerendered)을 통해 정적 페이지를 생성한다. 이는 빌드 시점에 모든 가능한 경로를 미리 생성하여 성능을 최적화한다.

변경파일

• app/(tabs)/home/page.tsx
• app/(tabs)/profile/page.tsx
• app/products/[id]/page.tsx

dynamicParams

export const dynamicParams = true; : 미리 생성되지 않은 페이지들이 dynamic 페이지들로 간주됨 -> 데이터베이스에 접속해서 사용자에게 결과물을 표시 -> 아웃풋이 저장돼서 그 이후에는 static페이지로 간주 됨

활용 사례:

• 사용자가 생성하는 콘텐츠가 많을 때 사용한다.
• 예를 들어, 사용자 프로필 페이지를 처음 요청할 때 동적으로 생성하고 이후 요청 시 캐시된 데이터를 제공하여 성능을 최적화한다.

Code Challenge

• 1. 캐싱 전략을 짜고 상품 업로드, 수정, 삭제할 때마다 revalidate하기
• 1. 상품 수정 페이지 만들기