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 (
+    <SWRConfig
+      value={{
+        fallback: {
+          "/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,40 +1,42 @@
-
 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) {
-        return NextResponse.json({ error: 'NezhaBaseUrl is not set' }, { status: 400 })
+    return NextResponse.json(
+      { error: "NezhaBaseUrl is not set" },
+      { status: 400 },
+    );
   }
 
   // Remove trailing slash
   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);
   }
 
   try {
-        const response = await fetch(nezhaBaseUrl+ '/api/v1/server/details',{
+    const response = await fetch(nezhaBaseUrl + "/api/v1/server/details", {
       headers: {
-                'Authorization': process.env.NezhaAuth as string
+        Authorization: process.env.NezhaAuth as string,
+      },
+      next: {
+        revalidate: 0,
       },
-            next:{
-                revalidate:1
-            }
     });
     const nezhaData = (await response.json()).result as NezhaAPI[];
     const data: ServerApi = {
       live_servers: 0,
       offline_servers: 0,
       total_bandwidth: 0,
-            result: []
-        }
-
-        data.result = nezhaData.map((element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
-            if (DateTime.now().toUnixInteger() - element.last_active > 300) {
+      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;
@@ -46,11 +48,11 @@ export async function GET(_: Request) {
         delete element.valid_ip;
 
         return element;
-        });
+      },
+    );
 
-        return NextResponse.json(data, { status: 200 })
+    return NextResponse.json(data, { status: 200 });
   } catch (error) {
-        return NextResponse.json({ error: error }, { status: 200 })
+    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 dm = decimals < 0 ? 0 : decimals
-  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  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 {
@@ -55,4 +65,3 @@ export const nezhaFetcher = (url: string) =>
       console.error(err);
       throw err;
     });
-