feat(ssr): server side render some things to speed up page loads

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

@@ -47,6 +47,24 @@ export async function generateMetadata({
   };
 }
 
-export default function Player({ params: { id, sort, page } }: Props) {
-  return <PlayerPage id={id} sort={sort} page={page} />;
+/**
+ * Gets the player's data on the server side.
+ *
+ * @param id the player's id
+ * @returns the player's data
+ */
+async function getData(id: string) {
+  const response = await ScoreSaberAPI.fetchPlayerData(id);
+  return {
+    data: response,
+  };
+}
+
+export default async function Player({ params: { id, sort, page } }: Props) {
+  const { data } = await getData(id);
+  if (!data) {
+    return <div>Player not found</div>;
+  }
+
+  return <PlayerPage player={data} sort={sort} page={page} />;
 }

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

@@ -1,4 +1,8 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
 import GlobalRanking from "@/components/GlobalRanking";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -9,6 +13,43 @@ type Props = {
   params: { page: string; country: string };
 };
 
-export default function RankingGlobal({ params: { page, country } }: Props) {
-  return <GlobalRanking page={Number(page)} country={country} />;
+async function getData(page: number, country: string) {
+  const response = await ScoreSaberAPI.fetchTopPlayers(page, country);
+  return {
+    data: response,
+  };
+}
+
+export default async function RankingGlobal({
+  params: { page, country },
+}: Props) {
+  const { data } = await getData(Number(page), country);
+  if (!data) {
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2" className="mt-2">
+            <div className="p-3 text-center">
+              <div role="status">
+                <div className="flex flex-col items-center justify-center gap-2">
+                  <Error errorMessage="Unable to find this page or country" />
+                </div>
+              </div>
+            </div>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  return (
+    <GlobalRanking
+      pageInfo={{
+        page: Number(page),
+        totalPages: data.pageInfo.totalPages,
+      }}
+      players={data.players}
+      country={country}
+    />
+  );
 }

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

@@ -1,4 +1,8 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
 import GlobalRanking from "@/components/GlobalRanking";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -9,6 +13,40 @@ type Props = {
   params: { page: string };
 };
 
-export default function RankingGlobal({ params: { page } }: Props) {
-  return <GlobalRanking page={Number(page)} />;
+async function getData(page: number) {
+  const response = await ScoreSaberAPI.fetchTopPlayers(page);
+  return {
+    data: response,
+  };
+}
+
+export default async function RankingGlobal({ params: { page } }: Props) {
+  const { data } = await getData(Number(page));
+  if (!data) {
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2" className="mt-2">
+            <div className="p-3 text-center">
+              <div role="status">
+                <div className="flex flex-col items-center justify-center gap-2">
+                  <Error errorMessage="Unable to find this page" />
+                </div>
+              </div>
+            </div>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  return (
+    <GlobalRanking
+      pageInfo={{
+        page: Number(page),
+        totalPages: data.pageInfo.totalPages,
+      }}
+      players={data.players}
+    />
+  );
 }