[Next.js] export const dynamic = 'force-dynamic'

 

현생이 바쁘고... 문서는 회사 위키에 남기다보니

오랜만에 내 블로그에 남겨보는 이슈 흔적... 너무 소홀했다

---

cms에 컨텐츠를 등록했는데, 새로고침을 해도 리스트에 바로 반영되지 않는 이슈가 발생하였다.

백엔드에서 캐싱한 데이터를 내려줄거라 생각하고 문의드렸더니, 캐싱하지 않는다는 답변이 돌아옴

우리 이슈네... 땀땀

 

 

 

 

Next.js 14와 React Query를 사용하고 있어서, 분명 둘 중 한 곳의 캐싱 문제일거라 생각하였다.

나는 React Query에 꽂혀서 이것저것 시도해보며 열심히 삽질하고 있었는데,

저쪽 어깨너머 희미하게 들려오는 "서버 컴포넌트 캐싱 문제같아요. 해결했어요"

export const dynamic = 'force-dynamic'

올라온 MR을 확인해보니 요 한줄이 추가되었다.

이거..였구나..?

 

 

 

 

https://nextjs.org/docs/14/app/building-your-application/caching#segment-config-options

Building Your Application: Caching | Next.js

https://nextjs.org/docs/14/app/api-reference/file-conventions/route-segment-config

File Conventions: Route Segment Config | Next.js

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

// dynamic : 레이아웃이나 페이지의 동적 동작을 완전히 정적이거나 완전히 동적으로 변경합니다.

라고 한다.

(면접 단골질문인 Static Rendering vs Dynamic Rendering은 다음에 알아보자)

 

근데 Good to know와 force-dynamic 설명을 읽어보니

App router를 사용하는 이유가 있는건디... 저 옵션을 사용하게 되면 페이지 단위로 캐싱이 전면 무효가 되는거 같..다...?

(영포자라.. 잘 이해한거 맞겠지..?)

 

다행히 해당 페이지는 딱 리스트만 있는 UI라, 해당 옵션을 사용하여 급한 불은 꺼두었다.

리팩토링 여지를 남긴채...

미래의 나, 파이팅