Hey guys, is it expected behavior that anything inside a Tab component will "load" [1] any time i view the page containing that component? ([1] not sure what the correct term here is, but basically my fetch query re-runs each time i view the page, as opposed to other pages where the skeleton appears the first time you view the page and then the content stays when navigating backwards or forwards). Here's the relevant code:

--- users/[username]/page.tsx

const Page: FC<PageProps> = ({ params: { username } }) => {
  return <UserPage username={username} />;
};

--- UserPage.tsx ---

export const UserPage: FC<UserPageProps> = ({ username }) => {
  const result = useQuery(GET_USER_QUERY, {
    variables: {
      username: username,
    },
  });

  return <UserComponent result={result} />;
};

--- UserComponent.tsx ---

export const UserComponent = ({ result }: UserComponentProps) => {
  const router = useRouter();
  const session = useSession();
  const searchParams = useSearchParams();

  const { data, loading, error } = result;

  const user = data?.user;

  const tab: any = searchParams?.toString().replace("=", "");

  const handleTabClick = (tab: any) => {
    router.push(`/users/${user.username}?${tab}`);
  }
}

what's the recommended way of updating the url with tab selection data without having this reload issue happen?