Cache issue with fetch
Answered
Ghost ant posted this in #help-forum
Ghost antOP
the following code shows outdated state, expected to see "3 days ago" instead of "14 days ago", on local server I see the correct state.
"use client"
//======================================
export const LastUpdates = ({ plan }: { plan: string }) => {
const [timeAgo, setDate] = React.useState()
React.useEffect(() => {
const fetchData = async () =>
await fetch<{ updated_at: string }>(
`/api/last-repo-changes?plan=${plan}`,
{
next: { revalidate: 3600 },
},
).then(r=>j.json())
.then(({ data }) => {
if (data?.updated_at) {
const date = parseISO(data.updated_at)
const timeAgo = formatDistanceToNow(date, { addSuffix: true })
setDate(timeAgo)
}
})
fetchData()
}, [plan])Answered by joulev
add
remove
export const revalidate = 3600 in the app/api/last-repo-changes/route.tsremove
{ next: { revalidate: 3600 } } here12 Replies
@Ghost ant the following code shows outdated state, expected to see "3 days ago" instead of "14 days ago", on local server I see the correct state.
tsx
"use client"
//======================================
export const LastUpdates = ({ plan }: { plan: string }) => {
const [timeAgo, setDate] = React.useState()
React.useEffect(() => {
const fetchData = async () =>
await fetch<{ updated_at: string }>(
`/api/last-repo-changes?plan=${plan}`,
{
next: { revalidate: 3600 },
},
).then(r=>j.json())
.then(({ data }) => {
if (data?.updated_at) {
const date = parseISO(data.updated_at)
const timeAgo = formatDistanceToNow(date, { addSuffix: true })
setDate(timeAgo)
}
})
fetchData()
}, [plan])
add
remove
export const revalidate = 3600 in the app/api/last-repo-changes/route.tsremove
{ next: { revalidate: 3600 } } hereAnswer
@joulev add `export const revalidate = 3600` in the `app/api/last-repo-changes/route.ts`
remove `{ next: { revalidate: 3600 } }` here
Ghost antOP
as far as I know,
export const ... is for pages only@Ghost ant as far as I know, `export const ...` is for pages only
no. it works in route handlers too
Ghost antOP
yeah, but this is a client component
Carpenter wasp
cache on next js too insane
@Ghost ant yeah, but this is a client component
export const revalidate = 3600 in the route.ts file. not this client component file.@Ghost ant does it work?
Ghost antOP
yeah thanks @joulev
nice. you're welcome
Ghost antOP
@joulev btw I have seen your website nextjs-faq.com, love it and will explore it further. I want to check if you might be interested in joining my affiliate program for https://indie-starter.dev, where you can earn additional income for your website efforts. I am offering $30-60 per sale, This could be a great opportunity to monetize your content while promoting valuable resources to your audience. Let me know if you're interested, and we can discuss the details further.
@Ghost ant <@484037068239142956> btw I have seen your website nextjs-faq.com, love it and will explore it further. I want to check if you might be interested in joining my affiliate program for https://indie-starter.dev, where you can earn additional income for your website efforts. I am offering $30-60 per sale, This could be a great opportunity to monetize your content while promoting valuable resources to your audience. Let me know if you're interested, and we can discuss the details further.
thanks, though im not interested in this deal. that website is non-profit and public domain and will remain so