I have a fetch for data that takes a 10 seconds. the server component which would receive this data doesn't render until the fetch is complete. is there a way to cancel the fetch?
#fetch on a server component
random eagle
junior apexBOT
Hi @random eagle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can cancel a fetch request in Next.js by using an AbortController signal. Here's how you can do it:
const { signal } = new AbortController()
fetch(url, { signal })
In the code above, an instance of AbortController is created and its signal property is passed to the fetch request. If you want to cancel the fetch request, you can call the abort method on the AbortController instance.
Please note that this will opt out of memoization in fetch requests.