Hi @naive dragon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Fetching Multiple times
narrow forumBOT
naive dragon
narrow forumBOT
Based on the provided knowledge sources, there are a few reasons why you might be seeing multiple fetches in your network logs.
- React's Strict Mode: In development mode, React's Strict Mode can lead to certain lifecycle methods and hooks being called twice, as a way to help catch potential problems in an application. This includes the
useEffecthook, which could lead to your fetch being called twice. If you have strict mode enabled, you might want to consider disabling it to see if that resolves the issue. Here's how you can disable it in your Next.js configuration:
/** @type {import("next").NextConfig} */
module.exports = {
reactStrictMode: false,
};
(Source: Github Issue (closed): useEffect double render breaks browser APIs - Dev Only. > Comments (https://github.com/vercel/next.js/issues/57688))
-
Incremental Static Regeneration (ISR): If you're using ISR in Next.js, it's possible to see multiple logs when a page is regenerated. This is because both HTML (for direct browser navigation) and JSON (for Single Page App (SPA) transitions) are rendered simultaneously to maintain consistency. This could potentially lead to multiple fetch calls.
(Source: Vercel > Docs > Functions > Vercel Function Logs > Runtime Logs > Number of logs per request (https://vercel.com/docs/functions/logs#number-of-logs-per-request)) -
Data Fetching Patterns: When fetching data inside components, there are two data fetching patterns: Parallel and Sequential. In the Parallel pattern, requests in a route are eagerly initiated and will load data at the same time. This could potentially lead to multiple fetch calls.
(Source: Next.js > Docs > App > Building-your-application > Data-fetching > Data Fetching and Caching > Patterns (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#patterns))