I'm having some weird behavior with my project using the App Directory.
When I navigate to the page using my site's navigation bar, the page loads correctly and the API call is made and logged to the browser's console twice (I don't entirely understand why it's happening twice, but that's not the problem here I don't think).
However, when manually typing the page's URL into the browser, the page does not load (it is a blank white page, it doesn't contain my root layout or anything), and the API call is being made and logged to the browser's console infinitely.

The page.tsx:

"use client";
import React from "react";

async function getGames() {
  const res = await fetch("/api/games", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    } as HeadersInit,
    body: JSON.stringify({
      searchQuery: "",
    }),
  });
  const games = await res.json();

  return games;
};

export default async function GamesPage() {
  const games = await getGames();
  console.log(games);

  return (
    <div>Games Page</div>
  );
};

Could someone please help me understand why this is happening, and/or assist me in fixing it?