make ranking page many speedy

src/app/player/[id]/page.tsx

@@ -1,4 +1,4 @@
-import PlayerPage from "@/components/player/PlayerPage";
+import PlayerPage from "@/components/player/Player";
 import { ssrSettings } from "@/ssrSettings";
 import { formatNumber } from "@/utils/number";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";

src/app/ranking/country/[country]/[page]/page.tsx

@@ -0,0 +1,44 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
+import GlobalRanking from "@/components/player/GlobalRanking";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+
+type RankingGlobalProps = {
+  params: { page: string; country: string };
+};
+
+// Get data from API (server-sided)
+async function getData(page: number, country: string) {
+  const pageData = await ScoreSaberAPI.fetchTopPlayers(page);
+  if (!pageData) {
+    return undefined;
+  }
+  return pageData;
+}
+
+export default async function RankingGlobal({
+  params: { page, country },
+}: RankingGlobalProps) {
+  const pageData = await getData(Number(page), country);
+
+  return (
+    <main>
+      <Container>
+        <Card className="mt-2">
+          {pageData == undefined && (
+            <Error errorMessage="Failed to load players. Is the page valid?" />
+          )}
+          {pageData && (
+            <GlobalRanking
+              page={Number(page)}
+              players={pageData.players}
+              totalPages={pageData.pageInfo.totalPages}
+              country={country}
+            />
+          )}
+        </Card>
+      </Container>
+    </main>
+  );
+}

src/app/ranking/country/[country]/page.tsx

@@ -1,14 +0,0 @@
-import GlobalRanking from "@/components/player/GlobalRanking";
-import { getPageFromSearchQuery } from "@/utils/utils";
-import { headers } from "next/headers";
-
-type RankingCountryProps = {
-  params: { country: string };
-};
-
-export default function RankingCountry({ params }: RankingCountryProps) {
-  const page = getPageFromSearchQuery(headers());
-  const country = params.country;
-
-  return <GlobalRanking page={page} country={country} />;
-}

src/app/ranking/global/[page]/page.tsx

@@ -0,0 +1,43 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
+import GlobalRanking from "@/components/player/GlobalRanking";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+
+type RankingGlobalProps = {
+  params: { page: string };
+};
+
+// Get data from API (server-sided)
+async function getData(page: number) {
+  const pageData = await ScoreSaberAPI.fetchTopPlayers(page);
+  if (!pageData || pageData.players.length == 0) {
+    return undefined;
+  }
+  return pageData;
+}
+
+export default async function RankingGlobal({
+  params: { page },
+}: RankingGlobalProps) {
+  const pageData = await getData(Number(page));
+
+  return (
+    <main>
+      <Container>
+        <Card className="mt-2">
+          {pageData == undefined && (
+            <Error errorMessage="Failed to load players. Is the page valid?" />
+          )}
+          {pageData && (
+            <GlobalRanking
+              page={Number(page)}
+              players={pageData.players}
+              totalPages={pageData.pageInfo.totalPages}
+            />
+          )}
+        </Card>
+      </Container>
+    </main>
+  );
+}

src/app/ranking/global/page.tsx

@@ -1,9 +0,0 @@
-import GlobalRanking from "@/components/player/GlobalRanking";
-import { getPageFromSearchQuery } from "@/utils/utils";
-import { headers } from "next/headers";
-
-export default function RankingGlobal() {
-  const page = getPageFromSearchQuery(headers());
-
-  return <GlobalRanking page={page} />;
-}