From 606237d57e7b1996673762a5bc2ac9cc1ee15076 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Thu, 24 Oct 2024 15:33:59 +0800
Subject: [PATCH] perf: use Link prefetch

---
 components/ServerCard.tsx | 170 +++++++++++++++++++-------------------
 1 file changed, 85 insertions(+), 85 deletions(-)

diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index ff07e5c..19e850d 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -12,6 +12,7 @@ import {
 import getEnv from "@/lib/env-entry";
 import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
 import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 
 export default function ServerCard({
@@ -31,95 +32,94 @@ export default function ServerCard({
   const locale = useLocale();
 
   return online ? (
-    <Card
-      className={
-        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
-      }
-      onClick={() => {
-        router.push(`/${locale}/${id}`);
-      }}
-    >
-      <section
-        className="grid items-center gap-2 lg:w-28 "
-        style={{ gridTemplateColumns: "auto auto 1fr" }}
+    <Link href={`/${locale}/${id}`} prefetch={true}>
+      <Card
+        className={
+          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
+        }
       >
-        <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
-        <div
-          className={cn(
-            "flex items-center justify-center",
-            showFlag ? "min-w-[17px]" : "min-w-0",
-          )}
+        <section
+          className="grid items-center gap-2 lg:w-28 "
+          style={{ gridTemplateColumns: "auto auto 1fr" }}
         >
-          {showFlag ? <ServerFlag country_code={country_code} /> : null}
-        </div>
-        <p
-          className={cn(
-            "break-all font-bold tracking-tight",
-            showFlag ? "text-xs" : "text-sm",
-          )}
-        >
-          {name}
-        </p>
-      </section>
-      <div className="flex flex-col gap-2">
-        <section className={"grid  grid-cols-5 items-center gap-3"}>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("CPU")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {cpu.toFixed(2)}%
-            </div>
-            <ServerUsageBar value={cpu} />
-          </div>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("Mem")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {mem.toFixed(2)}%
-            </div>
-            <ServerUsageBar value={mem} />
-          </div>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("STG")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {stg.toFixed(2)}%
-            </div>
-            <ServerUsageBar value={stg} />
-          </div>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("Upload")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {up.toFixed(2)}M/s
-            </div>
-          </div>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("Download")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {down.toFixed(2)}M/s
-            </div>
-          </div>
-        </section>
-        {showNetTransfer && (
-          <section
-            onClick={() => {
-              router.push(`/${locale}/network/${id}`);
-            }}
-            className={"flex items-center justify-between gap-1"}
+          <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
+          <div
+            className={cn(
+              "flex items-center justify-center",
+              showFlag ? "min-w-[17px]" : "min-w-0",
+            )}
           >
-            <Badge
-              variant="secondary"
-              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
-            >
-              {t("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
-            </Badge>
-            <Badge
-              variant="outline"
-              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
-            >
-              {t("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
-            </Badge>
+            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+          </div>
+          <p
+            className={cn(
+              "break-all font-bold tracking-tight",
+              showFlag ? "text-xs" : "text-sm",
+            )}
+          >
+            {name}
+          </p>
+        </section>
+        <div className="flex flex-col gap-2">
+          <section className={"grid  grid-cols-5 items-center gap-3"}>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("CPU")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {cpu.toFixed(2)}%
+              </div>
+              <ServerUsageBar value={cpu} />
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("Mem")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {mem.toFixed(2)}%
+              </div>
+              <ServerUsageBar value={mem} />
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("STG")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {stg.toFixed(2)}%
+              </div>
+              <ServerUsageBar value={stg} />
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("Upload")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {up.toFixed(2)}M/s
+              </div>
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("Download")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {down.toFixed(2)}M/s
+              </div>
+            </div>
           </section>
-        )}
-      </div>
-    </Card>
+          {showNetTransfer && (
+            <section
+              onClick={() => {
+                router.push(`/${locale}/network/${id}`);
+              }}
+              className={"flex items-center justify-between gap-1"}
+            >
+              <Badge
+                variant="secondary"
+                className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
+              >
+                {t("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+              >
+                {t("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
+              </Badge>
+            </section>
+          )}
+        </div>
+      </Card>
+    </Link>
   ) : (
     <Card
       className={cn(