root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: detail page use cache data

Browse Source
This commit is contained in:
hamster1963 2024-10-23 13:51:26 +08:00
parent be6df3cbed
commit 2c6bf553f7
4 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
View File

@ -1,7 +1,7 @@
"use client";
import { ServerDetailChartLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
import { NezhaAPISafe, ServerApi } from "@/app/[locale]/types/nezha-api";
import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
import { Card, CardContent } from "@/components/ui/card";
import { ChartConfig, ChartContainer } from "@/components/ui/chart";
@ -19,6 +19,7 @@ import {
YAxis,
} from "recharts";
import useSWR from "swr";
import useSWRImmutable from "swr/immutable";
type cpuChartData = {
timeStamp: string;
@ -62,12 +63,23 @@ export default function ServerDetailChartClient({
}) {
const t = useTranslations("ServerDetailChartClient");
const { data: allFallbackData } = useSWRImmutable<ServerApi>(
"/api/server",
nezhaFetcher,
);
const fallbackData = allFallbackData?.result?.find(
(item) => item.id === server_id,
);
const { data, error } = useSWR<NezhaAPISafe>(
`/api/detail?server_id=${server_id}`,
nezhaFetcher,
{
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
isVisible: () => show,
fallbackData,
revalidateOnMount: false,
revalidateIfStale: false,
},
);

14
app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx
View File

@ -1,7 +1,7 @@
"use client";
import { ServerDetailLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
import { NezhaAPISafe, ServerApi } from "@/app/[locale]/types/nezha-api";
import { BackIcon } from "@/components/Icon";
import ServerFlag from "@/components/ServerFlag";
import { Badge } from "@/components/ui/badge";
@ -12,6 +12,7 @@ import { useLocale, useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import useSWR from "swr";
import useSWRImmutable from "swr/immutable";
export default function ServerDetailClient({
server_id,
@ -46,11 +47,22 @@ export default function ServerDetailClient({
}
};
const { data: allFallbackData } = useSWRImmutable<ServerApi>(
"/api/server",
nezhaFetcher,
);
const fallbackData = allFallbackData?.result?.find(
(item) => item.id === server_id,
);
const { data, error } = useSWR<NezhaAPISafe>(
`/api/detail?server_id=${server_id}`,
nezhaFetcher,
{
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
fallbackData,
revalidateOnMount: false,
revalidateIfStale: false,
},
);

2
app/[locale]/(main)/header.tsx
View File

@ -64,7 +64,7 @@ function Header() {
// https://github.com/streamich/react-use/blob/master/src/useInterval.ts
const useInterval = (callback: Function, delay?: number | null) => {
const savedCallback = useRef<Function>(() => { });
const savedCallback = useRef<Function>(() => {});
useEffect(() => {
savedCallback.current = callback;
});

4
components/Switch.tsx
View File

@ -2,7 +2,7 @@
import { cn } from "@/lib/utils";
import { motion } from "framer-motion";
import React, { useEffect, useRef, useState, createRef } from "react";
import React, { createRef, useEffect, useRef, useState } from "react";
export default function Switch({
allTag,
@ -68,7 +68,7 @@ export default function Switch({
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
nowTag === tag
? "text-black dark:text-white"
: "text-stone-400 dark:text-stone-500"
: "text-stone-400 dark:text-stone-500",
)}
>
{nowTag === tag && (