perf: use swr to prefetch data

This commit is contained in:
hamster1963 2024-07-28 16:03:49 +08:00
parent f28b970787
commit 9ffe4c8995
6 changed files with 91 additions and 74 deletions

View File

@ -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)

View File

@ -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">
<ServerOverview />
<ServerList />
</div>
<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>
);
}

View File

@ -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) {
return NextResponse.json({ error: 'NezhaBaseUrl is not set' }, { status: 400 })
}
if (!process.env.NezhaBaseUrl) {
return NextResponse.json(
{ error: "NezhaBaseUrl is not set" },
{ status: 400 },
);
}
// Remove trailing slash
var nezhaBaseUrl = process.env.NezhaBaseUrl;
// Remove trailing slash
var nezhaBaseUrl = process.env.NezhaBaseUrl;
if (process.env.NezhaBaseUrl[process.env.NezhaBaseUrl.length - 1] === '/') {
nezhaBaseUrl = process.env.NezhaBaseUrl.slice(0, -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',{
headers: {
'Authorization': process.env.NezhaAuth as string
},
next:{
revalidate:1
}
});
const nezhaData = (await response.json()).result as NezhaAPI[];
const data: ServerApi = {
live_servers: 0,
offline_servers: 0,
total_bandwidth: 0,
result: []
try {
const response = await fetch(nezhaBaseUrl + "/api/v1/server/details", {
headers: {
Authorization: process.env.NezhaAuth as string,
},
next: {
revalidate: 0,
},
});
const nezhaData = (await response.json()).result as NezhaAPI[];
const data: ServerApi = {
live_servers: 0,
offline_servers: 0,
total_bandwidth: 0,
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">) => {
if (DateTime.now().toUnixInteger() - element.last_active > 300) {
data.offline_servers += 1;
} else {
data.live_servers += 1;
}
data.total_bandwidth += element.status.NetOutTransfer;
delete element.ipv4;
delete element.ipv6;
delete element.valid_ip;
delete element.ipv4;
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 element;
},
);
return NextResponse.json(data, { status: 200 });
} catch (error) {
return NextResponse.json({ error: error }, { status: 200 });
}
}

View File

@ -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>>;

BIN
bun.lockb

Binary file not shown.

View File

@ -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 {
@ -43,16 +53,15 @@ export const fetcher = (url: string) =>
});
export const nezhaFetcher = (url: string) =>
fetch(url)
.then((res) => {
if (!res.ok) {
throw new Error(res.statusText);
}
return res.json();
})
.then((data) => data)
.catch((err) => {
console.error(err);
throw err;
});
fetch(url)
.then((res) => {
if (!res.ok) {
throw new Error(res.statusText);
}
return res.json();
})
.then((data) => data)
.catch((err) => {
console.error(err);
throw err;
});