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

2023-11-08 07:41:07 +00:00 · 2023-11-08 07:41:07 +00:00 · c251239e45
commit c251239e45
parent 3a6312510a
11 changed files with 344 additions and 321 deletions
--- a/next.config.js
+++ b/next.config.js
@ -60,41 +60,41 @@ const nextConfig = {
  },
 };

-module.exports = withBundleAnalyzer(nextConfig);
+// module.exports = withBundleAnalyzer(nextConfig);

 // // Injected content via Sentry wizard below

-const { withSentryConfig } = require("@sentry/nextjs");
+// const { withSentryConfig } = require("@sentry/nextjs");

-module.exports = withSentryConfig(
-  module.exports,
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
+// module.exports = withSentryConfig(
+//   module.exports,
+//   {
+//     // For all available options, see:
+//     // https://github.com/getsentry/sentry-webpack-plugin#options

-    // Suppresses source map uploading logs during build
-    silent: true,
-    org: "sentry",
-    project: "scoresaber-reloaded",
-    url: "https://sentry.fascinated.cc/",
-  },
-  {
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+//     // Suppresses source map uploading logs during build
+//     silent: true,
+//     org: "sentry",
+//     project: "scoresaber-reloaded",
+//     url: "https://sentry.fascinated.cc/",
+//   },
+//   {
+//     // For all available options, see:
+//     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: false,
+//     // Upload a larger set of source maps for prettier stack traces (increases build time)
+//     widenClientFileUpload: false,

-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: false,
+//     // Transpiles SDK to be compatible with IE11 (increases bundle size)
+//     transpileClientSDK: false,

-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-    tunnelRoute: "/monitoring",
+//     // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+//     tunnelRoute: "/monitoring",

-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
+//     // Hides source maps from generated client bundles
+//     hideSourceMaps: true,

-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
-  },
-);
+//     // Automatically tree-shake Sentry logger statements to reduce bundle size
+//     disableLogger: true,
+//   },
+// );
--- a/src/app/player/[id]/[sort]/[page]/page.tsx
+++ b/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} />;
 }
--- a/src/app/ranking/country/[country]/[page]/page.tsx
+++ b/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}
+    />
+  );
 }
--- a/src/app/ranking/global/[page]/page.tsx
+++ b/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}
+    />
+  );
 }
--- a/src/components/GlobalRanking.tsx
+++ b/src/components/GlobalRanking.tsx
@ -1,122 +1,32 @@
 "use client";

 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
-import dynamic from "next/dynamic";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
 import Card from "./Card";
 import Container from "./Container";
 import CountyFlag from "./CountryFlag";
 import Pagination from "./Pagination";
-import Spinner from "./Spinner";
 import PlayerRanking from "./player/PlayerRanking";
-import PlayerRankingMobile from "./player/PlayerRankingMobile";
 import { Separator } from "./ui/separator";

-const Error = dynamic(() => import("@/components/Error"));
-
-type PageInfo = {
-  loading: boolean;
+type GlobalRankingProps = {
+  players: ScoresaberPlayer[];
+  country?: string;
+  pageInfo: {
    page: number;
    totalPages: number;
-  players: ScoresaberPlayer[];
+  };
 };

-type GlobalRankingProps = {
-  page: number;
-  country?: string;
-};
-
-export default function GlobalRanking({ page, country }: GlobalRankingProps) {
-  const router = useRouter();
-  const searchQuery = useSearchParams();
-  const isMobile = searchQuery.get("mobile") == "true";
-
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const [pageInfo, setPageInfo] = useState<PageInfo>({
-    loading: true,
-    page: page,
-    totalPages: 1,
-    players: [],
-  });
-
-  const updatePage = useCallback(
-    (page: any) => {
-      const windowSize = document.documentElement.clientWidth;
-      if (windowSize < 768 && !isMobile) {
-        router.push(`/ranking/global/${page}?mobile=true`);
-        router.refresh();
-        return;
-      }
-
-      console.log("Switching page to", page);
-      ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => {
-        if (!response) {
-          setError(true);
-          setErrorMessage("No players found");
-          setPageInfo({ ...pageInfo, loading: false });
-          return;
-        }
-        setPageInfo({
-          ...pageInfo,
-          players: response.players,
-          totalPages: response.pageInfo.totalPages,
-          loading: false,
-          page: page,
-        });
-        window.history.pushState(
-          {},
-          "",
-          country
-            ? `/ranking/country/${country}/${page}`
-            : `/ranking/global/${page}`,
-        );
-      });
-    },
-    [country, isMobile, pageInfo, router],
-  );
-
-  useEffect(() => {
-    if (!pageInfo.loading || error) return;
-
-    updatePage(pageInfo.page);
-  }, [error, country, updatePage, pageInfo.page, pageInfo.loading]);
-
-  if (pageInfo.loading || error) {
+export default function GlobalRanking({
+  players,
+  country,
+  pageInfo,
+}: GlobalRankingProps) {
  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 && <Error errorMessage={errorMessage} />}
-                  {!error && <Spinner />}
-                </div>
-              </div>
-            </div>
-          </Card>
-        </Container>
-      </main>
-    );
-  }
-
-  const players = pageInfo.players;
-
-  return (
-    <main>
-      <Container>
-        <Card outerClassName="mt-2" className="mt-2">
-          {pageInfo.loading ? (
-            <div className="flex justify-center">
-              <Spinner />
-            </div>
-          ) : (
          <div className="flex flex-col gap-2">
            <div className="flex items-center gap-2 p-2">
              {country && (
@ -125,15 +35,13 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
              <p>
                You are viewing{" "}
                {country
-                    ? "scores from " +
-                      normalizedRegionName(country.toUpperCase())
+                  ? "scores from " + normalizedRegionName(country.toUpperCase())
                  : "Global scores"}
              </p>
            </div>

            <Separator />

-              {!isMobile && (
            <table className="table w-full table-auto border-spacing-2 border-none text-left">
              <thead>
                <tr>
@ -156,8 +64,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                ))}
              </tbody>
            </table>
-              )}
-
+            {/* 
              {isMobile && (
                <div className="flex flex-col gap-2">
                  {players.map((player) => (
@ -171,7 +78,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                    </div>
                  ))}
                </div>
-              )}
+              )} */}

            {/* Pagination */}
            <div className="flex w-full flex-row justify-center">
@ -179,14 +86,10 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                <Pagination
                  currentPage={pageInfo.page}
                  totalPages={pageInfo.totalPages}
-                    onPageChange={(page) => {
-                      updatePage(page);
-                    }}
                />
              </div>
            </div>
          </div>
-          )}
        </Card>
      </Container>
    </main>
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@ -2,15 +2,17 @@ import {
  ArrowUturnLeftIcon,
  ArrowUturnRightIcon,
 } from "@heroicons/react/20/solid";
+import Link from "next/link";

 type PaginationProps = {
  currentPage: number;
  totalPages: number;
-  onPageChange: (pageNumber: number) => void;
+  useHref?: boolean;
+  onPageChange?: (pageNumber: number) => void;
 };

 export default function Pagination(props: PaginationProps) {
-  const { currentPage, totalPages, onPageChange } = props;
+  const { currentPage, totalPages, useHref, onPageChange } = props;

  // Calculate the range of page numbers to display
  const rangeStart = Math.max(1, currentPage - 2);
@ -28,26 +30,48 @@ export default function Pagination(props: PaginationProps) {
        <ul className="flex items-center gap-2">
          {currentPage > 1 && (
            <li className="rounded-md bg-neutral-700 hover:opacity-80">
+              {useHref ? (
+                <Link href={`?page=${currentPage - 1}`}>
+                  <a
+                    className="px-3 py-1"
+                    aria-label={`Page ${currentPage - 1} (previous page)`}
+                  >
+                    <ArrowUturnLeftIcon width={20} height={20} />
+                  </a>
+                </Link>
+              ) : (
                <button
                  className="px-3 py-1"
-                onClick={() => onPageChange(currentPage - 1)}
+                  onClick={() => onPageChange && onPageChange(currentPage - 1)}
                  aria-label={`Page ${currentPage - 1} (previous page)`}
                >
                  <ArrowUturnLeftIcon width={20} height={20} />
                </button>
+              )}
            </li>
          )}

          {currentPage !== 1 && currentPage - 2 > 1 && (
            <>
              <li>
+                {useHref ? (
+                  <Link href={`?page=1`}>
+                    <a
+                      className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
+                      aria-label="Page 1 (first page)"
+                    >
+                      1
+                    </a>
+                  </Link>
+                ) : (
                  <button
                    className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
-                  onClick={() => onPageChange(1)}
+                    onClick={() => onPageChange && onPageChange(1)}
                    aria-label="Page 1 (first page)"
                  >
                    1
                  </button>
+                )}
              </li>
              <li>
                <p>...</p>
@ -57,17 +81,32 @@ export default function Pagination(props: PaginationProps) {

          {pageNumbers.map((pageNumber) => (
            <li key={pageNumber}>
+              {useHref ? (
+                <Link href={`?page=${pageNumber}`}>
+                  <a
+                    className={`rounded-md px-3 py-1 ${
+                      pageNumber === currentPage
+                        ? "bg-blue-500 text-primary"
+                        : "bg-neutral-700 hover:opacity-80"
+                    }`}
+                    aria-label={`Page ${pageNumber}`}
+                  >
+                    {pageNumber}
+                  </a>
+                </Link>
+              ) : (
                <button
                  className={`rounded-md px-3 py-1 ${
                    pageNumber === currentPage
                      ? "bg-blue-500 text-primary"
                      : "bg-neutral-700 hover:opacity-80"
                  }`}
-                onClick={() => onPageChange(pageNumber)}
+                  onClick={() => onPageChange && onPageChange(pageNumber)}
                  aria-label={`Page ${pageNumber}`}
                >
                  {pageNumber}
                </button>
+              )}
            </li>
          ))}

@ -78,26 +117,48 @@ export default function Pagination(props: PaginationProps) {
              </li>

              <li>
+                {useHref ? (
+                  <Link href={`?page=${totalPages}`}>
+                    <a
+                      className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
+                      aria-label={`Page ${totalPages} (last page)`}
+                    >
+                      {totalPages}
+                    </a>
+                  </Link>
+                ) : (
                  <button
                    className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
-                  onClick={() => onPageChange(totalPages)}
+                    onClick={() => onPageChange && onPageChange(totalPages)}
                    aria-label={`Page ${totalPages} (last page)`}
                  >
                    {totalPages}
                  </button>
+                )}
              </li>
            </>
          )}

          {currentPage < totalPages && (
            <li className="rounded-md bg-neutral-700 hover:opacity-80">
+              {useHref ? (
+                <Link href={`?page=${currentPage + 1}`}>
+                  <a
+                    className="px-3 py-1"
+                    aria-label={`Page ${currentPage + 1} (next page)`}
+                  >
+                    <ArrowUturnRightIcon width={20} height={20} />
+                  </a>
+                </Link>
+              ) : (
                <button
                  className="px-3 py-1"
-                onClick={() => onPageChange(currentPage + 1)}
+                  onClick={() => onPageChange && onPageChange(currentPage + 1)}
                  aria-label={`Page ${currentPage + 1} (next page)`}
                >
                  <ArrowUturnRightIcon width={20} height={20} />
                </button>
+              )}
            </li>
          )}
        </ul>
--- a/src/components/player/PlayerChart.tsx
+++ b/src/components/player/PlayerChart.tsx
@ -1,3 +1,5 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { formatNumber } from "@/utils/numberUtils";
 import {
--- a/src/components/player/PlayerInfo.tsx
+++ b/src/components/player/PlayerInfo.tsx
@ -1,3 +1,5 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
 import { useSettingsStore } from "@/store/settingsStore";
@ -11,7 +13,7 @@ import {
  XMarkIcon,
 } from "@heroicons/react/20/solid";
 import dynamic from "next/dynamic";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "react-toastify";
 import { useStore } from "zustand";
 import Avatar from "../Avatar";
@ -27,6 +29,7 @@ type PlayerInfoProps = {
 };

 export default function PlayerInfo({ playerData }: PlayerInfoProps) {
+  const [mounted, setMounted] = useState(false);
  const playerId = playerData.id;
  const settingsStore = useStore(useSettingsStore, (store) => store);
  const playerScoreStore = useStore(useScoresaberScoresStore, (store) => store);
@ -36,6 +39,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {

  const toastId: any = useRef(null);

+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
  async function claimProfile() {
    settingsStore?.setProfile(playerData);
    addProfile(false);
@ -122,6 +129,8 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {

          {/* Settings Buttons */}
          <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
+            {mounted && (
+              <>
                {!isOwnProfile && (
                  <Button
                    onClick={claimProfile}
@ -151,6 +160,8 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                    )}
                  </>
                )}
+              </>
+            )}
          </div>
        </div>

@ -165,7 +176,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {

              <a
                className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/global/${Math.round(playerData.rank / 50)}`}
+                href={`/ranking/global/${Math.max(
+                  Math.round(playerData.rank / 50),
+                  1,
+                )}`}
              >
                <p>#{formatNumber(playerData.rank)}</p>
              </a>
@ -175,8 +189,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
            <div className="text-gray-300">
              <a
                className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/country/${playerData.country}/${Math.round(
-                  playerData.countryRank / 50,
+                href={`/ranking/country/${playerData.country}/${Math.max(
+                  Math.round(playerData.countryRank / 50),
+                  1,
                )}`}
              >
                <CountyFlag
--- a/src/components/player/PlayerPage.tsx
+++ b/src/components/player/PlayerPage.tsx
@ -1,94 +1,36 @@
-"use client";
-
 import Card from "@/components/Card";
 import Container from "@/components/Container";
-import Spinner from "@/components/Spinner";
 import Scores from "@/components/player/Scores";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { SortTypes } from "@/types/SortTypes";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import clsx from "clsx";
-import dynamic from "next/dynamic";
 import Image from "next/image";
-import { useEffect, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip";
 import PlayerChart from "./PlayerChart";
 import PlayerInfo from "./PlayerInfo";

-const Error = dynamic(() => import("@/components/Error"));
-
 type PlayerInfo = {
  loading: boolean;
  player: ScoresaberPlayer | undefined;
 };

 type PlayerPageProps = {
-  id: string;
+  player: ScoresaberPlayer;
  sort: string;
  page: string;
 };

 const DEFAULT_SORT_TYPE = SortTypes.top;

-export default function PlayerPage({ id, sort, page }: PlayerPageProps) {
-  const [mounted, setMounted] = useState(false);
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const [player, setPlayer] = useState<PlayerInfo>({
-    loading: true,
-    player: undefined,
-  });
-
+export default function PlayerPage({ player, sort, page }: PlayerPageProps) {
  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;

-  useEffect(() => {
-    setMounted(true);
-    if (error || !player.loading) {
-      return;
-    }
-
-    if (mounted == true) {
-      return;
-    }
-
-    ScoreSaberAPI.fetchPlayerData(id).then((playerResponse) => {
-      if (!playerResponse) {
-        setError(true);
-        setErrorMessage("Failed to fetch player. Is the ID correct?");
-        setPlayer({ ...player, loading: false });
-        return;
-      }
-      setPlayer({ ...player, player: playerResponse, loading: false });
-    });
-  }, [error, mounted, id, player]);
-
-  if (player.loading || error || !player.player) {
-    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 && <Error errorMessage={errorMessage} />}
-                  {!error && <Spinner />}
-                </div>
-              </div>
-            </div>
-          </Card>
-        </Container>
-      </main>
-    );
-  }
-
-  const playerData = player.player;
-  const badges = playerData.badges;
+  const badges = player.badges;

  return (
    <main>
      <Container>
-        <PlayerInfo playerData={playerData} />
+        <PlayerInfo playerData={player} />
        {/* Chart */}
        <Card outerClassName="mt-2">
          {/* Badges */}
@ -117,14 +59,10 @@ export default function PlayerPage({ id, sort, page }: PlayerPageProps) {
            })}
          </div>
          <div className="h-[320px] w-full">
-            <PlayerChart scoresaber={playerData} />
+            <PlayerChart scoresaber={player} />
          </div>
        </Card>
-        <Scores
-          playerData={playerData}
-          page={Number(page)}
-          sortType={sortType}
-        />
+        <Scores playerData={player} page={Number(page)} sortType={sortType} />
      </Container>
    </main>
  );
--- a/src/components/player/Scores.tsx
+++ b/src/components/player/Scores.tsx
@ -1,3 +1,5 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
--- a/src/utils/fetchWithQueue.ts
+++ b/src/utils/fetchWithQueue.ts
@ -23,7 +23,12 @@ export class FetchQueue {
      );
    }

-    const response = await fetch(url, options);
+    const response = await fetch(url, {
+      ...options,
+      next: {
+        revalidate: 300, // 5 minutes
+      },
+    });
    if (response.status === 429) {
      const hasRetryAfterHeader = response.headers.has("retry-after");
      let retryAfter = hasRetryAfterHeader