Opt out Fetch Cache on Static Routes
Unanswered
alfon posted this in #help-forum
alfonOP
## Problem Description
How do I opt out of fetch cache, i.e using
- No error on dev, but console.log prints at request time
- Error on build:
How do I opt out of fetch cache, i.e using
{ cache: no-store } without turning my route into runtime server side render a.k.a lambda?export const dynamic = "error";
export default function Home() {
const url = "...";
const img = fetch(url, { cache: "no-store" });
return <main></main>;
}- No error on dev, but console.log prints at request time
- Error on build:
- info Collecting page data
[ ] - info Generating static pages (0/4)Hello when is this printed?
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Page with dynamic = "error" encountered dynamic data method on /.
at D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\export\worker.js:394:35
at async Span.traceAsyncFn (D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\trace\trace.js:105:20)
- info Generating static pages (4/4)
> Export encountered errors on following paths:
/page: /18 Replies
alfonOP
## What I've Tried
### 1. Removing
Error on dev:
Error on build:
### 1. Removing
'no-store'Error on dev:
Failed to set fetch cache https://images.unsplash.com/photo-1619410283995-43d9134e7656?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb Error: fetch for over 2MB of data can not be cached
at IncrementalCache.set (D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\server\lib\incremental-cache\index.js:356:23)
at D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\server\lib\patch-fetch.js:292:74
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)Error on build:
Failed to set fetch cache https://images.unsplash.com/photo-1619410283995-43d9134e7656?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11)
at async globalThis.fetch (D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\server\lib\patch-fetch.js:93:16)
at async invokeRequest (D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\server\lib\server-ipc\invoke-request.js:17:12)
at async invokeIpcMethod (D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\server\lib\server-ipc\request-utils.js:45:21)
at async D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\server\lib\patch-fetch.js:292:29 {
cause: Error: read ECONNRESET
at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
at TCP.callbackTrampoline (node:internal/async_hooks:130:17) {
errno: -4077,
code: 'ECONNRESET',
syscall: 'read'
}### 2. Dynamic = 'force-static'
- No error on dev, but console.log prints at request time
- Error on build BUT Builds successfully
Console.log prints at request time too
error:
## Background
I want to fetch an image and get its metadata. I used
### TL:DR, Is there a way to opt out of fetch cache and retain route as static?
- No error on dev, but console.log prints at request time
- Error on build BUT Builds successfully
Console.log prints at request time too
error:
- info Collecting page data
[ ] - info Generating static pages (0/4)Hello when is this printed?
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Page with dynamic = "error" encountered dynamic data method on /.
at D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\export\worker.js:394:35
at async Span.traceAsyncFn (D:\Project\Next.js debug\no-fetch-cache-on-static-route\node_modules\next\dist\trace\trace.js:105:20)
- info Generating static pages (4/4)
> Export encountered errors on following paths:
/page: /## Background
I want to fetch an image and get its metadata. I used
fetch() but then it throws an error saying fetch for over 2MB of data can not be cached### TL:DR, Is there a way to opt out of fetch cache and retain route as static?
alfonOP
## Temporary solution:
Ignore Build and Dev Errors which is kinda annoying to see
Ignore Build and Dev Errors which is kinda annoying to see
alfonOP
I tried downgrading to next@13.4.12, doesn't work
I tried downgrading to next@13.4.11-5, doesn't work
alfonOP
I've made a discussion: https://github.com/vercel/next.js/discussions/54496
However, if you don't cache, what is the difference between cached and statically rendered?
I think it's not possible to not cache something but to keep the page statically rendered.
I think it's not possible to not cache something but to keep the page statically rendered.
Wait, I think I got you, You don't wanna cache it due to Vercel's limit right?
Then you can try the following options:
Then you can try the following options:
cache: 'no-cache',
next: {
revalidate: false
}@fuma Wait, I think I got you, You don't wanna cache it due to Vercel's limit right?
Then you can try the following options:
ts
cache: 'no-cache',
next: {
revalidate: false
}
alfonOP
Thanks for the reply and taking the time to read through
If I don't { cache: no-store } i just see the error logs.
The difference between { cache: no-store } and no { cache: no-store } is that the former force request-time route computation while the former remains a static initial build-time route computation.
I can't cache it eitherway. If i cache it, next.js throws error since the fetch result is larger than 2MB (4.6MB) (console error not vercel), and if i don't cache it then the page is dynamically built at request time.
So its more like i don't want to see the error of hitting the "response size limit".
Unfortunately, that code, well, not surprisingly, doesn't work.
This is the new error it showed:
If I don't { cache: no-store } i just see the error logs.
The difference between { cache: no-store } and no { cache: no-store } is that the former force request-time route computation while the former remains a static initial build-time route computation.
I think it's not possible to not cache something but to keep the page statically rendered.I also thought so, but how would that make sense? I get it about memoization but i dont need long-term data cache if its just statically computated
I can't cache it eitherway. If i cache it, next.js throws error since the fetch result is larger than 2MB (4.6MB) (console error not vercel), and if i don't cache it then the page is dynamically built at request time.
So its more like i don't want to see the error of hitting the "response size limit".
Unfortunately, that code, well, not surprisingly, doesn't work.
This is the new error it showed:
Warning: fetch for https://images.unsplash.com/photo-1619410283995-43d9134e7656?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb on /articles/[slug] specified "cache: no-store" and "revalidate: false", only one should be specified.Seems like only
no-cache works, I guess the only possible workaround is to store the result of fetch somewhere, and read the result during the build.{
build: "node ./scripts/create-result.js && next build"
}@fuma Wait, I think I got you, You don't wanna cache it due to Vercel's limit right?
Then you can try the following options:
ts
cache: 'no-cache',
next: {
revalidate: false
}
The code above worked for me, but the problem is that it doesn't fit your requirement
alfonOP
wow @fuma probably it wouldnt help you but wanna know what i did
what have you did?
@fuma what have you did?
alfonOP
Installed node-fetch, renamed fetch() to fetch2()
alfonOP
### Temporary Solution
For some reason I've found out that you can override the default Next.js fetching behavior by installing
For some reason I've found out that you can override the default Next.js fetching behavior by installing
node-fetch.import fetch2 from 'node-fetch'
export const dynamic = "error";
export default function Home() {
const url = "...";
const img = fetch2(url);
return <main></main>;
}