1. 문제 상황

2. 해결 과정

처음보는 에러이다. middleware api 서버를 next.js로 띄워서 이와 관련한 에러가 아닐까 의심을 했다.

1. middleware api서버로의 fetch에 force-cache옵션을 끈다.

next.js의 api서버가 아직 만들어지지 않아 발생한 오류였다. 이 옵션을 끄니 해결이 되었다.

force-cache 옵션을 끄니 해결이 되었다. 하지만, force-cache옵션이 꺼져 있어서 옵션이 바뀔 때마다 데이터를 매 번 다시 서버에서 받아오는 것을 확인할 수 있다.

❗ next.js 공식문서에서는 분명히 기본값이 force-cache라는데 실제로 그렇지 않은 듯하다.

그렇다면, api서버가 이제 만들어졌으니 이제 force-cache옵션을 켜도 되지 않을까?

2. middleware api서버로의 fetch에 force-cache옵션을 켠다.

한 번 배포를 하고, 이제 api서버가 만들어졌을 테니 이제 force-cache로 수정을 하고 다시 배포를 해보았다.

오른쪽 네트워크창을 보면 처음에만 데이터를 가져오고, 그 이후로는 캐싱된 데이터를 ‘디스크 캐시’에서 가져오는 것을 확인할 수 있다. 데이터 불러오는데 5~10ms로 정말 짧다.

3. middleware api 서버에서 실제 api 서버로의 fetch에 force-cache옵션을 활성화한다면?

이렇게 한다면 middleware api에서 api 서버로 데이터를 전송할 때도 데이터가 캐싱이 될 것이다. 클라이언트에서 middleware api서버로 fetch한 데이터를 캐싱하는데 middleware api에서 실제 api서버로 fetch한 데이터를 또 캐싱해둘 필요가 있을까? 과도한 캐싱 전략이 아닐까?

각각 캐싱을 할 경우 middle api 서버의 부하를, 그리고 실제 api 서버의 부하를 모두 줄여줄 수 있을 것이라 판단했다. 위 기능의 경우 실제 api서버에서 middleware api로 전달받은 데이터를 그대로 클라이언트에 보내준다. 이 둘의 간극은 없기에 revalidate 주기를 일치시켜준다면 문제가 없을 것이라고 판단했다.

3. 원인 분석

fetch의 force-cache옵션을 활성화하면 next.js는 static하게 페이지를 만든다. middleware api 서버가 아직 만들어지지 않았는데 force—cache옵션으로 static하게 페이지를 만드는 과정에서 발생한 에러였다. force-cache옵션을 끄고 middleware api서버를 먼저 배포한 후, force-cache옵션을 활성화하며 캐싱을 시도하니 해결할 수 있었다.