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

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

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

4
components/Switch.tsx
View File

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