revalidate is not working in Vercel deployed app
Unanswered
Hilsa shad posted this in #help-forum
Hilsa shadOP
I'm having trouble with my NextJS 13.5.5 app which is deployed in Vercel. I setted the revalidate: 3600 variable in the request but it's not making new requests. It's been days and it keeps getting old data from the server.
The backend is an API deployed in Heroku.
Any suggestions?
The backend is an API deployed in Heroku.
Any suggestions?
18 Replies
Hilsa shadOP
podcasts.ts
page.tsx
import { Endpoints } from "../endpoints";
import { Podcast } from "../models";
export const getPodcasts = async (): Promise<Podcast[]> => {
const response = await fetch(Endpoints.PODCASTS.GET_ALL, {
next: { revalidate: 3600 },
});
const podcasts = await response.json();
return podcasts;
};page.tsx
import Image from "next/image";
import Logo from "@/images/logo.svg";
import HomePage from "./home";
import { getPodcasts } from "@/api/services/podcasts";
const Home = async () => {
const items = await getPodcasts();
};make sure your page has export dynamic = "force-dynamic"
if the page is static it wont update to let the fetch update
if the page is static it wont update to let the fetch update
@DirtyCajunRice | AppDir make sure your page has export dynamic = "force-dynamic"
if the page is static it wont update to let the fetch update
That will make the page always update wont it?
@Hilsa shad podcasts.ts
`import { Endpoints } from "../endpoints";
import { Podcast } from "../models";
export const getPodcasts = async (): Promise<Podcast[]> => {
const response = await fetch(Endpoints.PODCASTS.GET_ALL, {
next: { revalidate: 3600 },
});
const podcasts = await response.json();
return podcasts;
};`
page.tsx
`import Image from "next/image";
import Logo from "@/images/logo.svg";
import HomePage from "./home";
import { getPodcasts } from "@/api/services/podcasts";
const Home = async () => {
const items = await getPodcasts();
};
`
Try a smaller value, say 10. Does the behaviour reproduce with such small values?
Hilsa shadOP
I tried 10 but it only works locally. And as you said I don't want it to always fetch, just when certain time passes. (It's a list of podcasts that doesn't change frequently)
@Hilsa shad I tried 10 but it only works locally. And as you said I don't want it to always fetch, just when certain time passes. (It's a list of podcasts that doesn't change frequently)
Weird… try explicitly configuring the route to revalidate by removing that next: {…} option and adding export const revalidate = 10; to the page instead (again, use a small number to test)
@joulev That will make the page always update wont it?
yeah but the page has no dynamic params and the page itself is building as static. so he woudl need to revalidate the PAGE as well as the fetch.
really?
i fought this issue over and over
Or should be enough, but it’s not behaving as expected here
and the only way i got it to not do what he is saying is with force dynamic
it was one of the first issues i struggled with with next
force-dynamic forces dynamic rendering. The revalidate option might opt that fetch out of dynamic rendering, but force-dynamic still forces the rest of the page to be rendered at request time
i repeatedly found that a totally static page ignored revalidation of the fetch within it.
since like... 13.1 all the way till now.
Hilsa shadOP
I'll try using the route level and let you know. Thank you both for your comments! 