Next Intel Issue with cacheComponents
Unanswered
Black Caiman posted this in #help-forum
Black CaimanOP
Hey Everyone, i am using next-intel in my project and also i tried to use cacheComponents but each time i try to run build i keep getting this error
i think that due to that next cant cache the component as the lang are not cacheable so is there any solution
Error: Route "/[locale]/forget-password": Uncached data was accessed outside of <Suspense>. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/blocking-route
at body (<anonymous>)
at html (<anonymous>)
To get a more detailed stack trace and pinpoint the issue, try one of the following:
- Start the app in development mode by running `next dev`, then open "/[locale]/forget-password" in your browser to investigate the error.
- Rerun the production build with `next build --debug-prerender` to generate better stack traces.
Error occurred prerendering page "/en/forget-password". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /[locale]/(auth)/forget-password/page: /en/forget-password, exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: nulli think that due to that next cant cache the component as the lang are not cacheable so is there any solution
3 Replies
@Black Caiman Hey Everyone, i am using next-intel in my project and also i tried to use cacheComponents but each time i try to run build i keep getting this error
Error: Route "/[locale]/forget-password": Uncached data was accessed outside of <Suspense>. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/blocking-route
at body (<anonymous>)
at html (<anonymous>)
To get a more detailed stack trace and pinpoint the issue, try one of the following:
- Start the app in development mode by running `next dev`, then open "/[locale]/forget-password" in your browser to investigate the error.
- Rerun the production build with `next build --debug-prerender` to generate better stack traces.
Error occurred prerendering page "/en/forget-password". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /[locale]/(auth)/forget-password/page: /en/forget-password, exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: null
i think that due to that next cant cache the component as the lang are not cacheable so is there any solution
try adding a root loading.tsx.
protip:
cacheComponts changes a lot of the mental model that might not work with existing ecosystem. im sure they're working on geting it work on cacheComponents but until then you might want to not use it until there is a guide unless you want to do some trial-and-error and see what worked
protip:
cacheComponts changes a lot of the mental model that might not work with existing ecosystem. im sure they're working on geting it work on cacheComponents but until then you might want to not use it until there is a guide unless you want to do some trial-and-error and see what worked
Black CaimanOP
i tried your solution but still same issue as the new cache update in next 16 need to wrap any component use header or cookie in suspense what i found that next-intel use it by default so now all my component are dynamic also i found this articale that suggest to use static params but it will be alot of work and huge refactor so it un doable for me
https://aurorascharff.no/posts/implementing-nextjs-16-use-cache-with-next-intl-internationalization/
https://aurorascharff.no/posts/implementing-nextjs-16-use-cache-with-next-intl-internationalization/
yeah cacheComponent is a headache 😅