Next 의 Link 컴포넌트 prefetch 기능에 대하여

안녕하세요! Open API에서 데이터를 실시간으로 받아야하는건가요? 그럴 필요가 없다면 앱에서 사용할 데이터를 미리 다 받아와서 DB에 저장해놓고 태진님의 앱에서는 DB로 요청하게 하는 것도 방법입니다. 그리고 주기적으로 Open API를 요청해서 DB를 업데이트 하는 로직을 생성하면 되지 않을까 생각되네요. 만약 실시간으로 Open API를 통해 받아와야한다면 보통 돈으로 해결하지 않을까요 ㅎㅎ. 아니면 잠깐 동안의 실시간성을 포기하고 동일 요청에 대한 응답을 캐시로 생성해두는 것도 방법입니다. (위 방법과 유사하지만 데이터 업데이트 기준이 살짝 다른 차이가 있을 것 같아요) 현업에서는 Rate Limit이 있는 API를 사용할때 무분별한 요청이 가지 않도록 클라이언트 단에서는 직접 호출하지 않게하는 것 같아요. 위에 말씀드린 DB에 따로 저장하는 방식을 많이 사용하는 것 같고, 사용자가 직접 API를 호출해야 한다면 아마도 돈으로 해결할 것 같습니다.

이미 좋은 답변이 많이 있지만, 저의 의견도 남겨 드릴게요. 현재 두 문제(페이지 로딩 속도, Rate Limit)를 다 해결하려면 캐시를 활용하는 게 가장 적절한 방법일 것 같아요. 캐싱 구현에서 가장 중요한 (어려운) 부분은 데이터 최신화를 어떻게 해줄지 입니다. (최신화를 시켜줄 필요가 없는 상황이 가장 좋아요.) 그래서 대부분의 캐싱 솔루션이 데이터 전략에 초점이 맞춰져 있어요. 그래서 가장 먼저 현재 사이트에서 최신성이 중요한 데이터와 그렇지 않은 데이터를 구분하고 이것을 Open API에서 나눠서 제공해주고 있는지 확인하는 게 가장 중요할 것 같아요. 그렇다면 최신성이 중요하지 않은 정보를 캐싱하고 prefetch 하게 만들고 각 페이지 CSR 시점에 최신성이 중요한 데이터만 따로 호출하는 방법으로 API 부화를 줄일 수 있을 것 같아요. 데이터를 부분적으로 캐싱하는 게 어렵다면, 모든 API 결과를 캐싱하고 주기적으로 캐시를 업데이트 시켜주는 게 좋겠네요. 다만 API Limit이 초당 5회로 제한되어 있다고 하셔서 이 한도 내에서 효율적으로 데이터를 업데이트 시켜주는 게 쉽지 않아 보이기는 합니다. 정리하면 가장 먼저 어떤 데이터를 캐싱해야 하는지를 확인하고, 그 데이터가 일부 데이터인지 전체 데이터인지 그리고 어느 주기로 최신화 시켜주어야 하는지에 따라서 어디에 저장하고 어떻게 불러올지를 결정하면 될 것 같아요.

Next.js의 `Link` 컴포넌트는 기본적으로 링크를 prefetching 하여 사용자 경험(UX)를 향상시킵니다. 브라우저가 사용자가 클릭하기 전에 페이지를 미리 가져와서 더 빠른 페이지 로드를 제공합니다. 그러나 이 경우에 API 호출이 많아져서 사용량 제한에 도달하는 문제가 발생했습니다. 이 문제를 해결하기 위한 몇 가지 방법이 있습니다: 1. **Prefetching을 끄기**: `Link` 컴포넌트에 `prefetch={false}`를 설정하여 prefetching을 비활성화할 수 있습니다. 이렇게 하면 API 호출이 많이 발생하지 않아 rate limit에 도달하는 문제를 해결할 수 있습니다. 그러나 이렇게 하면 사용자가 페이지를 방문할 때 마다 새로 API를 호출해야 하므로 페이지 로딩 속도가 느려질 수 있습니다. 2. **API를 캐시하기**: 각 페이지의 데이터를 캐시하면 동일한 API 요청이 반복적으로 발생하는 것을 줄일 수 있습니다. 이를 통해 API의 사용량을 줄일 수 있습니다. 여러 캐싱 전략이 있을 수 있으며, 이는 서버 측 렌더링(SSR)이나 정적 사이트 생성(SSG)을 사용하여 구현할 수 있습니다. 3. **API Rate Limit 해결**: Rate limit가 문제라면, API 제공자에게 연락해서 rate limit를 늘려달라고 요청할 수 있습니다. 혹은, 다른 API를 찾거나 자체 백엔드를 구축하여 이 문제를 해결할 수도 있습니다. 현업에서는 이러한 문제를 해결하기 위해 주로 API 캐싱과 같은 기술을 사용하며, 필요에 따라 API rate limit를 늘리는 등의 방법을 사용합니다. 또한, 서버 측에서 데이터를 미리 로드하고 캐시하여 사용자에게 더 빠른 응답을 제공하는 SSR을 사용하는 경우도 많습니다. 따라서, 가장 적합한 방법은 현재 프로젝트의 요구사항과 API의 제한에 따라 결정되어야 합니다. 이 모든 것을 고려하여 최적의 해결책을 찾아야 할 것입니다.

1#1
2<Link href="/page" prefetch={false}>
3  <a>Page</a>
4</Link>