젠장할 소프트 네비게이션

소프트 네비게이션

next.js 앱은 네비게이션은 디폴트값으로 소프트 네비게이션으로 이뤄진다고 한다.

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

Routing: Linking and Navigating | Next.js

 

그런데 저놈의 소프트 네비게이션은 어떻게 선택할 수 있는 것이 아니다.

내가 하드한걸 원해도 불가능하다니... 오... 젠장

 

이 현상을 알아보느라 3시간을 할애했다.

 

발단은 이렇다.

 

특정 화면에서 늘 데이터를 새롭게 fetch 받고 싶었다.

fetch는 자동적으로 캐싱이 될 수 있으므로, 캐싱하지 말라고 옵션에 no-store를 추가했다.

 

 

추가했으니 됐겠구나싶어 재차 확인해보니 데이터를 새롭게 fetch 해오지 않고 있었다.

뭔가 조치가 부족했나 싶어 헤더에 캐시 컨트롤, 캐시 옵션, next.js 리발리데이트 등 싹 다 쑤셔박았는데도 fetch가 다시 이루어지지는 않았다.

 

진짜 미치고 팔짝 뛸 노릇이었다.

모발이 한 5개 이상 빠진 것 같다.

 

그러던 중 소프트 네비게이션을 인지하게 되었다.

 

친애하는 소프트 네비게이션께서는 변경된 세그먼트에서만 데이터를 새롭게 받아와주어 화면에 다시 그려주신다.

내가 만든 페이지는 세그먼트가 변경될 일이 없으므로 소프트 네비게이션되어 fetch를 할 일이 없게 되어버린 것이다.

 

이것을 해결하고자 스택오버플로우를 실컷 뒤져보았는데

이분들도 소프트 네비게이션이 특정 상황에서는 문제라고 하신다.

 

https://github.com/vercel/next.js/issues/42546

App Dir is caching renders even with "dynamic" set to "force-dynamic" · Issue #42546 · vercel/next.js

 

사실 내가 원하는 기능 구현하려면 서버컴포넌트를 클라이언트 컴포넌트로 바꾼 뒤 필요할때마다 리프래쉬를 해주면 될 것 같다.

 

하지만 뭐랄까... 그러고 싶지는 않은 느낌이 있다.

아직 자료 조사가 덜 끝난 느낌이 있다.

 

일단 더 찾아보고, 마지막 즈음 필요한 방법을 적용해야겠다.