I have a component in nextjs and I wanna be able to turn that into a server component because I'm dealing with sensitive data and I do not want this to be accessed from the browser, I'm using the pages directory and in the docs it said that I do not need to change on anything however I still can see the request being sent in the network tab of my app.

export async function getServerSideProps(ctx: any) {
  const supabase = createServerSupabaseClient(ctx);
  let user = {}; // Default value if fetching from Supabase fails
  let plans = {};
  const { data: userData, error } = await supabase.auth.getSession();

  if (userData?.session?.user.id) {
    try {
      const getUserUrl = `${process.env.NEXT_PUBLIC_CLIENT_URL}/api/supabase/getUserById?API_ROUTE_SECRET=${process.env.NEXT_PUBLIC_API_ROUTE_SECRET}`;
      const userRequestData = { id: userData?.session?.user.id };

      const getUserResponse = await fetch(getUserUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(userRequestData),
      });
      const userProfile = await getUserResponse.json();

      if (userProfile) {
        user = userProfile;
        console.log("userProfile", userProfile);

        const getPriceUrl = `${process.env.NEXT_PUBLIC_CLIENT_URL}/api/get-price?API_ROUTE_SECRET=${process.env.NEXT_PUBLIC_API_ROUTE_SECRET}`;

        const getPriceResponse = await fetch(getPriceUrl);
        const plansResponse = await getPriceResponse.json();

        plans = plansResponse;
      }
    } catch (error) {
      console.error("Error fetching investigating status:", error);
    }
  }

  return {
    props: {
      user,
      plans,
    },
  };
}

const Home = ({ user }: any) => {
  const supabase = useSupabaseClient();
  const router = useRouter();

  useEffect(() => {
    if (user) {
      router.push("/dashboard");
    }
  }, [user]);

  return (
    //jsx
  );
};

export default Home;