Good pratics fetch data nextjs (Client or Server)

I’d like to start by saying that I’m relatively new to using Next.js, although I have years of experience with React and AWS.

We have decided to undertake a complete refactor of our application’s codebase to transition to Next.js.

Currently, we are facing a dilemma:

Is it better to make API fetch calls for data in page.tsx (server-side) or is it preferable to perform them within the “View” component (client-side)?

I’ll give an example to explain myself better:

export default async function Page({ params }: Props) {
  try {
    const { id } = params;

    const location = await getLocationApi(id);

    return <LocationUpdateView title={tcommon('menu')} location={location} />;
  } catch (error) {
    return <View500 />;
  }
}

This is my Page.tsx where I make the API call to get location data.

Currently, everything works correctly, and it seems like the best choice until Page.tsx calls an element like LocationUpdateView.tsx, which updates some of the data that the getLocationApi provided. Here’s where the problem arises: once an API call is made, for example updateNameLocation, which updates the location name in the database that getLocationApi returned, the database gets updated but the frontend has to wait for the server to call getLocationApi again (which happens automatically, though I haven’t figured out why) but it does so after a few seconds, not instantly.

My solution to this problem was this:

export function LocationUpdateView({ title, location }: { title: string; location: ApiTypes.Location }) {

  const [localLocation, setLocalLocation] = useState(location);

  useEffect(() => {
    setLocalLocation(location);
  }, [location])
  
  .
  .
  .
  }

This way, the user doesn’t notice that the client and server are not synchronized.

My question is: is there a better way to handle this? Should I move the getLocationApi call directly to the client, or is there a way to notify the server that the data has changed and to re-call the API? Of course, I want to avoid reloading the page, otherwise the problem would already be solved.