diff --git a/app/tournois/page.tsx b/app/tournois/page.tsx
index 078125c..5c779a9 100644
--- a/app/tournois/page.tsx
+++ b/app/tournois/page.tsx
@@ -1,11 +1,9 @@
-import { Tournament } from "@/types";
-
 import dynamic from "next/dynamic";
 import Layout from "@/components/Layout";
 import TournamentTable from "@/components/TournamentTable";
-import getTournaments from "@/utils/getTournamentData";
 
-// TODO can these functions be put into a custom hook?
+const server = process.env.SERVER;
+
 /**
  * Imports the tournament map component, ensuring CSR only.
  * @remarks SSR is not supported by react-leaflet
@@ -20,7 +18,17 @@ const TournamentMap = dynamic(() => import("@/components/TournamentMap"), {
 });
 
 export default async function Tournaments() {
-  const tournamentData: Tournament[] = await getTournaments("france");
+  /**
+   * Retrieves tournament data from /api/tournaments/:country
+   * @remarks The result is cached for the revalidation period in seconds
+   */
+  const res = await fetch(`${server}/api/tournaments/france`, {
+    next: { revalidate: 300 },
+  });
+  if (res.status !== 200) {
+    throw new Error("Failed to fetch tournament data");
+  }
+  const tournamentData = await res.json();
 
   return (
     <Layout>
diff --git a/utils/getTournamentData.tsx b/utils/getTournamentData.tsx
index 6797259..9c02ee3 100644
--- a/utils/getTournamentData.tsx
+++ b/utils/getTournamentData.tsx
@@ -14,5 +14,5 @@ export default async function getTournaments(country: string) {
   if (res.status !== 200) {
     throw new Error("Failed to fetch tournament data");
   }
-  return res.json();
+  return await res.json();
 }