perf: refactor global map as client side render

app/(main)/ClientComponents/Global.tsx

@@ -1,11 +1,30 @@
-import { GetNezhaData } from "@/lib/serverFetch";
+"use client";
+
+import { ServerApi } from "@/app/types/nezha-api";
+import { nezhaFetcher } from "@/lib/utils";
+import useSWR from "swr";
 
 import { geoJsonString } from "../../../lib/geo-json-string";
 import GlobalInfo from "./GlobalInfo";
+import GlobalLoading from "./GlobalLoading";
 import { InteractiveMap } from "./InteractiveMap";
 
-export default async function ServerGlobal() {
+export default function ServerGlobal() {
-  const nezhaServerList = await GetNezhaData();
+  const { data: nezhaServerList, error } = useSWR<ServerApi>(
+    "/api/server",
+    nezhaFetcher,
+  );
+
+  if (error)
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="text-sm font-medium opacity-40">{error.message}</p>
+      </div>
+    );
+
+  if (!nezhaServerList) {
+    return <GlobalLoading />;
+  }
 
   const countryList: string[] = [];
   const serverCounts: { [key: string]: number } = {};

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -202,9 +202,7 @@ export default function ServerOverviewClient() {
                     </p>
                     <p className="text-[11px] flex items-center  text-nowrap font-semibold">
                       <ArrowDownCircleIcon className="size-3 mr-0.5" />
-                      {formatBytes(
+                      {formatBytes(data?.total_in_speed)}/s
-                        data?.total_in_speed,
-                      )}/s
                     </p>
                   </section>
                 </>

app/(main)/page.tsx

@@ -1,10 +1,13 @@
 import ServerList from "@/components/ServerList";
 import ServerOverview from "@/components/ServerOverview";
-import { Suspense } from "react";
+import dynamic from "next/dynamic";
 
-import ServerGlobal from "./ClientComponents/Global";
 import GlobalLoading from "./ClientComponents/GlobalLoading";
 
+const ServerGlobal = dynamic(() => import("./ClientComponents/Global"), {
+  loading: () => <GlobalLoading />,
+});
+
 export default async function Home({
   searchParams,
 }: {
@@ -15,11 +18,7 @@ export default async function Home({
     <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
       <ServerOverview />
       {!global && <ServerList />}
-      {global && (
+      {global && <ServerGlobal />}
-        <Suspense fallback={<GlobalLoading />}>
-          <ServerGlobal />
-        </Suspense>
-      )}
     </div>
   );
 }