On this page, data fetched from the server. When I first render this page or reload it, all the data is displayed correctly, but if I go to another page and then go back without reloading, the old data is displayed.
I’m guessing the page is cached along with the fetched data and this is a problem.
Page code:
async function GetAboutTablesData(): Promise<{ miscs: IMisc[]; contacts: IContact[]; socials: ISocial[]; } | false> {
try {
const response = await fetch(`${API_URL}/admin/about`, {
method: "GET",
cache: "no-store",
})
if (response.ok) return response.json()
return false
} catch (error) {
console.error(error)
return false
}
}
export default async function AdminContentAbout(): Promise<React.ReactElement> {
const aboutTablesData: { miscs: IMisc[]; contacts: IContact[]; socials: ISocial[]; } | false = await GetAboutTablesData()
return (
<main className="admin-content-about">
<section className="navigator">
<div className="navigator-path">
<Link href="/admin" className="navigator-title-link">
<h2>Navigator</h2>
</Link>
<span className="navigator-char">></span>
<Link href="/admin/content" className="navigator-title-link">
<h2>Content</h2>
</Link>
<span className="navigator-char">></span>
<h1 className="navigator-title">About</h1>
</div>
</section>
{aboutTablesData && (<Elementor originFormData={aboutTablesData} />)}
{aboutTablesData === false && (<p>Server error</p>)}
</main>
)
}
I expect that every time this page is visited there will be a fetch of data.
I have already tried to put properties in the fetch request like cache: no-cache
and next: {revalidate: 0}
but they had no effect.
I also tried add export const dynamic = 'force-dynamic'
and export const revalidate = 0
but they had no effect too.
For now, the only working option is updating the page using window.location.reload()
but I think it’s wrong.
What needs to be done to ensure that data is always fetched from the server?