Cache3 revalidatePath로 캐시 무효화 시 마주칠 수 있는 상황 내 상황을 클로드가 정리해줌# Next.js revalidatePath: 'page' vs 'layout' 타입의 차이와 함정## 상황블로그에 새 포스트를 작성한 후 `revalidatePath`로 캐시를 무효화했지만, 포스트 목록에 새 글이 나타나지 않는 문제가 발생했습니다.**환경:**- Next.js 15 (App Router)- `generateStaticParams`를 사용한 정적 페이지 생성- ISR(Incremental Static Regeneration) 환경**코드 구조:**```typescript// app/[page]/page.tsxexport const generateStaticParams = async () => { const totalCount = await getTotal.. 2025. 10. 2. 아이템 리스트 페이지의 서버 컴포넌트를 최적화 시켜보기(fetch 캐싱 옵션) 사전 지식next app router의 서버 컴포넌트에서 다이나믹한 요소 cookies, params, searchParams 등등을 사용하는 동작이 없다면 SSG로 동작하여 캐싱이 강제화 된다 -> fetch option [ force cache ] . 이때 next: revalidate 와 같은 주기를 등록한다면 이는 ISR로 동작하여 주기마다 캐시에 담긴 데이터를 최신화 시켜준다. fetch에 no-store 옵션을 명시한다면 이는 SSR 동작이 되어 요청 시점마다 서버에서 HTML을 생성해서 보내므로 SSG/ISR 보다 성능상 좋지 않다. 그래서 개인적으로 Next의 최적화를 생각하여 서버 컴포넌트는 될 수 있는 한 SSG/ISR로 할려고 노력하는 편이다. 문제 상황제목과 같이 아이템 리스트를 보.. 2025. 9. 19. [Web] 캐시의 종류 및 동작 순 꼭 볼것 : https://toss.tech/article/smart-web-service-cache 웹 서비스 캐시 똑똑하게 다루기 웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다. toss.tech 참고: https://guiyomi.tistory.com/130?category=993662 웹 캐시(web cache) 종류 및 동작 순서 캐시란 데이터에 빠르게 접근하기 위해 자주 사용되는 데이터나 값을 미리 복사해 놓는 임시 장소를 의미한다. 캐시를 적용하기 좋은 데이터는 다음과 같다. - 자주 참조되는 데이터 - 자주 변경 guiyomi.tistory.com 캐시의 정의 및 종류 Cache란 데이터에 자주 .. 2023. 1. 4. 이전 1 다음
