perf: use swr to prefetch data

README.md

@@ -6,13 +6,11 @@
 </div>
 
 ### 一键部署到 Vercel
+
 [部署简易教程](https://buycoffee.top/blog/tech/nezha)
 <br>
 <br>
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhamster1963%2Fnezha-dash&env=NezhaBaseUrl,NezhaAuth&project-name=nezha-dash&repository-name=nezha-dash)
 
-
-
-
 ![screen-shot-one](/.github/shotOne.png)
 ![screen-shot-two](/.github/shotTwo.png)

app/(main)/page.tsx

@@ -1,14 +1,21 @@
 import ServerList from "@/components/ServerList";
 import ServerOverview from "@/components/ServerOverview";
-
+import { GetNezhaData } from "@/lib/prefetch";
-
+import { SWRConfig } from "swr";
 
 export default function Home() {
-
   return (
-    <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
+    <SWRConfig
-      <ServerOverview />
+      value={{
-      <ServerList />
+        fallback: {
-    </div>
+          "/api/server": GetNezhaData(),
+        },
+      }}
+    >
+      <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
+        <ServerOverview />
+        <ServerList />
+      </div>
+    </SWRConfig>
   );
 }

app/api/server/route.ts

@@ -1,56 +1,58 @@
-
 import { NezhaAPI, ServerApi } from "@/app/types/nezha-api";
 import { MakeOptional } from "@/app/types/utils";
 import { NextResponse } from "next/server";
-import { DateTime } from "luxon";
 
 export async function GET(_: Request) {
-    if (!process.env.NezhaBaseUrl) {
+  if (!process.env.NezhaBaseUrl) {
-        return NextResponse.json({ error: 'NezhaBaseUrl is not set' }, { status: 400 })
+    return NextResponse.json(
-    }
+      { error: "NezhaBaseUrl is not set" },
+      { status: 400 },
+    );
+  }
 
-    // Remove trailing slash
+  // Remove trailing slash
-    var nezhaBaseUrl = process.env.NezhaBaseUrl;
+  var nezhaBaseUrl = process.env.NezhaBaseUrl;
 
-    if (process.env.NezhaBaseUrl[process.env.NezhaBaseUrl.length - 1] === '/') {
+  if (process.env.NezhaBaseUrl[process.env.NezhaBaseUrl.length - 1] === "/") {
-        nezhaBaseUrl = process.env.NezhaBaseUrl.slice(0, -1);
+    nezhaBaseUrl = process.env.NezhaBaseUrl.slice(0, -1);
-    }
+  }
 
-    try {
+  try {
-        const response = await fetch(nezhaBaseUrl+ '/api/v1/server/details',{
+    const response = await fetch(nezhaBaseUrl + "/api/v1/server/details", {
-            headers: {
+      headers: {
-                'Authorization': process.env.NezhaAuth as string
+        Authorization: process.env.NezhaAuth as string,
-            },
+      },
-            next:{
+      next: {
-                revalidate:1
+        revalidate: 0,
-            }
+      },
-        });
+    });
-        const nezhaData = (await response.json()).result as NezhaAPI[];
+    const nezhaData = (await response.json()).result as NezhaAPI[];
-        const data: ServerApi = {
+    const data: ServerApi = {
-            live_servers: 0,
+      live_servers: 0,
-            offline_servers: 0,
+      offline_servers: 0,
-            total_bandwidth: 0,
+      total_bandwidth: 0,
-            result: []
+      result: [],
+    };
+    const timestamp = Date.now() / 1000;
+    data.result = nezhaData.map(
+      (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+        if (timestamp - element.last_active > 300) {
+          data.offline_servers += 1;
+        } else {
+          data.live_servers += 1;
         }
+        data.total_bandwidth += element.status.NetOutTransfer;
 
-        data.result = nezhaData.map((element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+        delete element.ipv4;
-            if (DateTime.now().toUnixInteger() - element.last_active > 300) {
+        delete element.ipv6;
-                data.offline_servers += 1;
+        delete element.valid_ip;
-            } else {
-                data.live_servers += 1;
-            }
-            data.total_bandwidth += element.status.NetOutTransfer;
 
-            delete element.ipv4;
+        return element;
-            delete element.ipv6;
+      },
-            delete element.valid_ip;
+    );
 
-            return element;
+    return NextResponse.json(data, { status: 200 });
-        });
+  } catch (error) {
-
+    return NextResponse.json({ error: error }, { status: 200 });
-        return NextResponse.json(data, { status: 200 })
+  }
-    } catch (error) {
+}
-        return NextResponse.json({ error: error }, { status: 200 })
-    }
-
-}

app/types/utils.ts

@@ -1 +1,2 @@
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>;

lib/utils.ts

@@ -6,15 +6,25 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function formatBytes(bytes: number, decimals: number = 2) {
-  if (!+bytes) return '0 Bytes'
+  if (!+bytes) return "0 Bytes";
 
-  const k = 1024
+  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals
+  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+  const sizes = [
+    "Bytes",
+    "KiB",
+    "MiB",
+    "GiB",
+    "TiB",
+    "PiB",
+    "EiB",
+    "ZiB",
+    "YiB",
+  ];
 
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
 export function getDaysBetweenDates(date1: string, date2: string): number {
@@ -43,16 +53,15 @@ export const fetcher = (url: string) =>
     });
 
 export const nezhaFetcher = (url: string) =>
-      fetch(url)
+  fetch(url)
-        .then((res) => {
+    .then((res) => {
-          if (!res.ok) {
+      if (!res.ok) {
-            throw new Error(res.statusText);
+        throw new Error(res.statusText);
-          }
+      }
-          return res.json();
+      return res.json();
-        })
+    })
-        .then((data) => data)
+    .then((data) => data)
-        .catch((err) => {
+    .catch((err) => {
-          console.error(err);
+      console.error(err);
-          throw err;
+      throw err;
-        });
+    });
-