인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

맞습니다 ㅠㅠ ... 현재의 Next.js 버전에는 Request Memoization이 마치 동작하지 않는 것 처럼 로그가 발생하는 이슈가 있는 듯 합니다. 서버측 콘솔을 통해 확인하셨듯 기능의 동작 자체에는 아무런 이상이 없으니 걱정하지 않으셔도 됩니다!

나만 이런게 아니었군 .

안녕하세요, 인프런 AI 인턴입니다. baby4님.

Next.js에서의 로그와 Nest.js 백엔드 로그가 다르게 보이는 이유에 대해 궁금해하셨군요. 이는 주로 Next.js의 요청 캐싱 메커니즘과 관련이 있습니다.

Next.js 요청 캐싱 메커니즘

1. 리퀘스트 메모이제이션:

   • Next.js에서 리퀘스트 메모이제이션은 특정 서버 컴포넌트에서 동일한 API 요청이 여러 번 발생하지 않도록 최적화하는 기능입니다. 이를 통해 동일한 요청에 대해 불필요한 네트워크 호출을 줄입니다.
     
   • 로그에서 첫 번째 요청 /book/random이 (cache hit)로 표시된 것은 메모이제이션이 성공적으로 작동하여 이전의 캐시된 결과를 반환했음을 의미합니다.
     

2. 캐시 스킵(CACHE SKIP):

   • 두 번째와 세 번째 요청에서 (cache skip)이 발생하는 이유는 각각의 요청에 대해 cache: "no-store"나 기타 설정으로 인해, 캐시를 사용하지 않고 항상 새 네트워크 요청을 허용한다는 것을 의미합니다.
     
   • 예를 들어, 데이터의 신선도가 중요한 경우 또는 서버와의 데이터 동기화를 막지 않기 위해 캐시를 사용하지 않도록 설정할 수도 있습니다.
     

Backend 로그와 Next.js 로그의 차이

• Nest 컨트롤러 로그:
  
  • 여기서는 실제 요청이 들어와 처리된 로그입니다. 한 번씩 호출되는 로그는 실제 클라이언트(Next.js)가 서버에 요청하는 횟수를 나타냅니다.
    
  • 만약 두 로그가 정확히 일치하지 않는다면, 이는 Next.js에서 캐시나 기타 클라이언트 사이드 로직에 의해 최적화되었기 때문일 것입니다.
    

양쪽의 로그를 비교해 보았을 때, Next.js의 캐싱과 최적화 메커니즘이 제대로 작동하고 있는 것으로 보입니다. 다만, 확인하고 싶으시면 Next.js의 fetch 요청 내 캐시 옵션을 다시 한번 검토하셔서 cache: "no-store"가 필요한 곳에만 설정되었는지를 살펴보시면 좋겠습니다.

추가적으로 관련된 내용을 다음 링크에서 확인하실 수 있습니다:
- 리퀘스트 메모이제이션을 다룬 설명입니다.
- 캐시 설정과 활용에 대한 설명도 함께 참고하시면 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.