you can solve this by fetching on the server and passing it down to the client.

Another thing your might want to consider is to use cache if you don't want to fetch everything again on each visit.

And if you ever need to fetch on clientside (normally you don't on initial render), you should use a clientside fetching library like swr or react query, to control your data

I tried now with this code for app/page.tsx:

import styles from "./page.module.css";
import { useEffect } from "react";

export default function Home() {
  console.log('Hello');

  return (
    <main className={styles.main}>
      <h1>Home</h1>
    </main>
  );
}

And 'Hello' is being called sometimes when I go to the main page of the app, so even with this approach that initial data fetch point wouldv'e been lost.. For example if I'm fetching the balance in initial visit, and user is buying something and that balance is being updated in the frontend and if he goes back to the main page he will have initial balance (consider that balance for the game will be updated very often so there is no point of updating the database each time the balance is changed so instead it's updated in the frontend and at the end it's updated in the database)

It's not a good way of thinking, that the balance should be handled by the client only because it will be updated very often. Else banks and payment services will have a very big problem. So keep it serverside. You can cache and invalidate your page if needed directly after something changes [(see here)](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating)

I know that is not good idea, that's why I said it's a game.. Not so important.. And balance can change few times within a second, and other parameters as well, so I would be having thousands of request in 1 min by 1 user

If security is not really important for you, then you can make it via clientside states: Fetch on the server, pass it down via props and modify the clientside state. Then save the new data either in interval or when there is a specific action

But even with that it's the problem.. Let's say I have client component:

export default ClientComponent({ data }: ClientComponentProps) {
  const { coins } = data;
  const [coinsData, setCoinsData] = useState(coins);

  const updateCoins = () => {
    setCoinsData(coinsData + 1);
  }

  return (
    <>
      <p>Coins: {coinsData}</p>
      <button onClick={updateCoins}>Update</button>
    </>
  )
};

When I'm on this page this works, but as soon as I leave the page and I go back to this page this will be updated and coins will be the ones from the database

yes, then save the new data either in interval or when there is a specific action (for example the user leaves the page)

I've been trying for so long to find the answer to this topic on user leaving the page but I couldn't find one.. Do you have any docs or examples how to achieve this?

useEffect(() => {
    return () => {
        // changed route kinda
    };
}, []);

This somehow works.. But this is called twice, once in visit and once when user leaves the page.. So I can use state to check, in first one will set to true and then in second one will do the work

const [leaving, setLeaving] = useState(false);
useEffect(() => {
  return () => {
    if(leaving) {
      //...
    } else {
      setLeaving(true);
    }
  }
}, []);

Is this kinda ok?

Not even this works..

you can use the [beforeunload event](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event) to check if the client leaves the page. Then simply save your stuff inside this event and you should be good to go 👍

Already tried that.. A lot of problems, mobile users not detecting at all..

alright, then take a look at the [visibilitychange event](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event). That will reliably be fired. This is a possible implementation: https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/

Not firing when pages switching

I don't know anymore.. This is getting crazy

then sync it on other user actions. Get creative and provide the best experience for your client

you might want to await the data saving. Else you get redirected while saving and that may end up in data loss

@Yellow and black potter wasp solved?

Sorry I forgot to reply.. That solved it, thanks a lot

That sounds great. Please mark solution

Sorry I'm new to this community, what does mark solution mean?

Which message helped you the most and resolved your initial issue the most?

This approach with navigating to other pages through <button> instead of <Link> component and saving the data in async function to await the data save, so final code would've been:

const homeBtnClicked = () => {
  saveData(); // save data into the database
  router.push('/');
};

const earnBtnClicked = () => {
  saveData(); // save data into the database
  router.push('/earn');
};

const friendBtnClicked = () => {
  saveData(); // save data into the database
  router.push('/friend');
};

const marketBtnClicked = () => {
  saveData(); // save data into the database
  router.push('/market');
};

return (
  <div>
    <button onClick={homeBtnClicked}>Home</button>
    <button onClick={earnBtnClicked}>Earn</button>
    <button onClick={friendBtnClicked}>Friend</button>
    <button onClick={marketBtnClicked}>Market</button>
  </div>
)