Hello, all. I'm brand new to Next and having a bit of trouble wrapping my mind about how things work. I'll describe my problem as best I can, sorry for the wall of text.

So, I'm building a very basic app that has server pages and an API. I haven't yet set up a database, so the API just has static data that it sends. So far I have a single point: /api/user/id which sends a user object. The route looks like this:

export async function GET(request: Request, { params }: { params: { id: string } }) {
  const id = params.id;
  const user: TUser = userResolver(id); // this is just a JS object
  // Here I am just trying to see if anything at all changes when I expect a refresh. No luck so far.
  user.inventory[1].amount = Math.floor(Math.random() * 10);
  return NextResponse.json(user);
}

Components-wise, I have a User, Inventory, InventoryItem server components, and a Toggle client component. The User component makes the API call and gets the user. It then passes the user data to the Inventory component. That one does some formatting of the inventory items. The InventoryItem page displays the formatted item and the Toggle.

Now, the items are going to be changed on the fly, so I am trying to see how that would work. This is my Toggle component:

const EquippedToggle = ({ equipped }: TEquippedToggle) => {
  const [isEquipped, setIsEquipped] = useState(equipped);

  const router = useRouter();

  const handleToggle = () => {
    setIsEquipped(!isEquipped);
    // Fetch call to update the database will eventually go here.
    router.refresh(); // Now just trying to see if refresh will fetch different data.
  };

  return <input type="checkbox" checked={isEquipped} onChange={handleToggle} />;
};

When I check/uncheck the input, a GET request goes out, but nothing updates. I am sure I am doing something wrong or simply not understanding what to expect. Could someone please help and explain?

Thank you!