Fetched data is not updated after changes on next js ssr page

I've got this kind of situation. My application has two pages. The main one is used to show statistics about the user's account. And the user can go to the second one to change these statistics. Both of these pages are server side rendered. So when I go to the first page I see my statistics fetched from the database. I go to the second one and change the data. Then I go back. To go back I use component from "next/link". And here I am on the first page and I see the initial statistics. It seems like the page memoizing fetched data and doesn't update it when I go back. So what do I do to update the data every time the user goes to the statistics page? It's looks like there's no other option except to make it a client component and use useEffect(() => {}, []) hook. What do you think?

Here's 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

    const loadedAllocaitonsGroups = (await (await fetch("http://localhost:3000/api/getAllocationsGroups", {

        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({  userId: session.user.id })

    })).json()).allocationsGroups

    const loadedLedgerEntries = (await (await fetch("http://localhost:3000/api/getLedgerEntries", {

        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({  userId: session.user.id, orderBy: { date: "asc" } })

    })).json()).ledgerEntries

    const loadedCategories = (await (await fetch("http://localhost:3000/api/getCategories", {

        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({  userId: session.user.id })

    })).json()).categories

    let allocationsGroupsMap = {}

    for(const groupData of loadedAllocaitonsGroups) {

        if(!allocationsGroupsMap[groupData.id]) allocationsGroupsMap[groupData.id] = {}
        allocationsGroupsMap[groupData.id] = { name: groupData.name, allocationsData: [] }
    }

    for (const allocationData of loadedAllocations) {

        if (!allocationData.allocationsGroupId) continue
        allocationsGroupsMap[allocationData.allocationsGroupId].allocationsData.push(allocationData)
    }

    loadedAllocations = loadedAllocations.filter((value) => !value.allocationsGroupId)

    let incomesCategoriesMap = {}
    let costsCategoriesMap = {}
    let total = 0
    let statistics = []

    for(const category of loadedCategories) {
        
        if(category.type[0] == 'I') incomesCategoriesMap[category.id] = { name: category.name, total: 0 }
        else costsCategoriesMap[category.id] = { name: category.name, total: 0 }
    }

    for(let i = 0; i < loadedLedgerEntries.length; i++) {

        if(incomesCategoriesMap.hasOwnProperty(loadedLedgerEntries[i].categoryId)) {

            incomesCategoriesMap[loadedLedgerEntries[i].categoryId].total += loadedLedgerEntries[i].amount
            total += loadedLedgerEntries[i].amount
        }

        else {
            
        costsCategoriesMap[loadedLedgerEntries[i].categoryId].total += loadedLedgerEntries[i].amount
            total -= loadedLedgerEntries[i].amount
        }

        statistics.push({ date: loadedLedgerEntries[i].date, money: total  })
    }

    console.log("rendering server page...");

    return (

        <div className="top-0 left-0 flex flex-row h-screen" 
            style=>
            <Sidebar session={ session } loadedAllocations={ loadedAllocations } loadedAllocationsGroups={ Object.values(allocationsGroupsMap) }/>
            <div className="w-full m-3 flex flex-col">
                <Header session={ session } />
                <StatisticsBoard statistics={ statistics } incomesCategoriesMap={ incomesCategoriesMap} costsCategoriesMap={ costsCategoriesMap }/>
            </div>
        </div>
    )
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/3ZLnYNh