diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx index fc4f434..efeb2a2 100644 --- a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx @@ -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( + "/api/server", + nezhaFetcher, + ); + const fallbackData = allFallbackData?.result?.find( + (item) => item.id === server_id, + ); + const { data, error } = useSWR( `/api/detail?server_id=${server_id}`, nezhaFetcher, { refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000, isVisible: () => show, + fallbackData, + revalidateOnMount: false, + revalidateIfStale: false, }, ); diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx index 55a3e52..a3236d7 100644 --- a/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx @@ -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( + "/api/server", + nezhaFetcher, + ); + const fallbackData = allFallbackData?.result?.find( + (item) => item.id === server_id, + ); + const { data, error } = useSWR( `/api/detail?server_id=${server_id}`, nezhaFetcher, { refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000, + fallbackData, + revalidateOnMount: false, + revalidateIfStale: false, }, ); diff --git a/app/[locale]/(main)/header.tsx b/app/[locale]/(main)/header.tsx index 46bc6b6..f3a6e9e 100644 --- a/app/[locale]/(main)/header.tsx +++ b/app/[locale]/(main)/header.tsx @@ -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(() => { }); + const savedCallback = useRef(() => {}); useEffect(() => { savedCallback.current = callback; }); diff --git a/components/Switch.tsx b/components/Switch.tsx index c55b498..1a83a6c 100644 --- a/components/Switch.tsx +++ b/components/Switch.tsx @@ -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 && (