René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"`run` / `wait` can get stuck when using Next.js with App Router ","articleBody":"At yesterday's hackathon, a participant shared that predictions created and polled for completion using `run` would hang indefinitely, despite the Replicate dashboard showing that prediction as finishing minutes earlier.\r\n\r\nAfter debugging by adding a `console.log` statement in the `progress` callback function, we determined that this behavior was caused by the extensions to `fetch` made by Next.js when using App Router [^1]. From [\"Data Fetching, Caching, and Revalidating\"](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) in the Next.js docs:\r\n\r\n\u003e Next.js extends the native [fetch Web API](https://developer.mozilla.org/docs/Web/API/Fetch_API) to allow you to configure the [caching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data) and [revalidating](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) behavior for each fetch request on the server. React extends fetch to automatically [memoize](https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed) fetch requests while rendering a React component tree.\r\n\u003e ...\r\n\u003e By default, **Next.js automatically caches the returned values of fetch in the [Data Cache](https://nextjs.org/docs/app/building-your-application/caching#data-cache)** on the server. This means that the data can be fetched at build time or request time, cached, and reused on each data request.\r\n\r\nBecause the initial `GET /v1/predictions/{id}` response was cached, subsequent requests polling for status returned the same response, which had the initial `\"starting\"` status.\r\n\r\nOur workaround involved setting `replicate.fetch` to a wrapped function that specified a [`cache: no-store` fetch option](https://nextjs.org/docs/app/building-your-application/caching#fetch-optionscache). But it's unclear whether there's a better way to get the desired behavior.\r\n\r\nWe should either document or add a workaround to make this work correctly in Next.js.\r\n\r\n[^1]: `fetch` when using [Pages Router](https://nextjs.org/docs/pages/building-your-application), like in the [\"Build a website with Next.js\"](https://replicate.com/docs/get-started/nextjs) sample project, works as expected.","author":{"url":"https://github.com/mattt","@type":"Person","name":"mattt"},"datePublished":"2023-09-18T13:20:52.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":9},"url":"https://github.com/136/replicate-javascript/issues/136"}