I'm facing an interesting scenario with my application. It consists of two main pages - one displaying user account statistics and the other allowing users to edit these statistics. Both pages are rendered on the server side. When I navigate to the first page, I see the data fetched from the database. Upon moving to the second page, making changes, and returning back using the 'next/link' component, I notice that the initial statistics are displayed rather than updated ones. It appears that the page is caching the fetched data and not refreshing it upon return. What steps can be taken to ensure that the data is updated every time a user visits the statistics page? One potential solution could involve converting it into a client-side component and utilizing the useEffect(() => {}, []) hook. Your thoughts?
Below is the code snippet for the statistics page:
import Sidebar from "@/components/sidebar/component"
import Header from "@/components/header/component"
import StatisticsBoard from "@/components/statisticsBoard/component"
import { getServerSession } from "next-auth"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { redirect } from "next/navigation"
export default async function Home() {
const session = await getServerSession(authOptions)
if(!session) redirect("/")
let loadedAllocations = (await (await fetch("http://localhost:3000/api/getAllocations", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ userId: session.user.id })
})).json()).allocations
// Rest of the code...