Repository navigation
run / wait can get stuck when using Next.js with App Router #136
Description
Activity
Hey,
I also just ran into this, and it took me quite some time to debug and come to the conclusion that some "magical" caching must be the culprit.Would you mind to share your workaround code?
With App Router and Vercel getting even more traction, this definatly should be addressed!
Thanks!
@mirko314 Thanks for sharing. That's a helpful data point.
Here's what I remember the code to be. Please give this a try and let me know if that works for you:
replicate = new Replicate({/*...*/}) replicate.fetch = (url, options) => { return fetch(url, { ...options, cache: "no-store" }); };
Reacted by Sam AsanteReacted by Alexandru Ţurcanu, cloudatlas9, Lucas Lima, gitdrums and Sam Asante@mattt @mirko314
Hi!
Thanks for this very helpful comment.
I ran into this too. I'm fairly new to next.js with the app router and having a hard time trying to make it work.
Maybe would you have a more complete exemple to share, showing how you managed to make it work?I'm trying to use it within a replicate create/wait structure (which is equivalent to run/wait)
That would be fantastic :-)
I agree this should be addressed. We won't be the only ones trying to use replicate on the new next.js app router.
Thanks!
Just ran into the same issue and this #136 (comment) fixed it for me too. Thanks for the post @mattt, probably saved me hours of troubleshooting 🙌
@mattt Would it be possible to update the documentation with a more detailed explanation on how to use replicate-javascript on next.js recent versions? 😃
Rather than changing the Replicate
fetchbehavior, you can usenoStoreto opt-out of caching for your component.import Replicate from 'replicate'; import { unstable_noStore as noStore } from 'next/cache'; let replicate = new Replicate(...); export default async function Component() { noStore(); let prediction = await replicate.predictions.create(...) ... }
API: https://nextjs.org/docs/app/api-reference/functions/unstable_noStore
Reacted by Fred KISSIE, Web Dev Cody, Roman, Max Davish, Muhammed Mustafa, Ismoiljon, Matija Marohnić, yasong and Mauricio PalmaReacted by Alexandru Ţurcanu, Pratik sharma, Vitor L Cavalcanti, Andy Ruiz Garramones and stan-statelyReacted by Karl Horky and yasongReacted by Karl Horky, Omid Sayfun and yasongI've opened a couple PRs to help prevent further confusion about this:
您无需改变复制
fetch行为，就可以选择noStore退出组件的缓存。import Replicate from 'replicate'; import { unstable_noStore as noStore } from 'next/cache'; let replicate = new Replicate(...); export default async function Component() { noStore(); let prediction = await replicate.predictions.create(...) ... }
API：https：//nextjs.org/docs/app/api-reference/functions/unstable_noStore
This Great, I was stuck with this issue for a day, and after reading this issue, it was finally fixed
At yesterday's hackathon, a participant shared that predictions created and polled for completion using
runwould hang indefinitely, despite the Replicate dashboard showing that prediction as finishing minutes earlier.After debugging by adding a
console.logstatement in theprogresscallback function, we determined that this behavior was caused by the extensions tofetchmade by Next.js when using App Router 1. From "Data Fetching, Caching, and Revalidating" in the Next.js docs:Because the initial
GET /v1/predictions/{id}response was cached, subsequent requests polling for status returned the same response, which had the initial"starting"status.Our workaround involved setting
replicate.fetchto a wrapped function that specified acache: no-storefetch option. But it's unclear whether there's a better way to get the desired behavior.We should either document or add a workaround to make this work correctly in Next.js.
Footnotes
fetchwhen using Pages Router, like in the "Build a website with Next.js" sample project, works as expected. ↩