perf: detail page use cache data

hamster1963 · Oct 23, 2024 · 2c6bf55 · 2c6bf55
1 parent be6df3c
commit 2c6bf55
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 5 deletions.
diff --git 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<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,
     },
   );
 

diff --git 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<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,
     },
   );
 

diff --git 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<Function>(() => { });
+  const savedCallback = useRef<Function>(() => {});
   useEffect(() => {
     savedCallback.current = callback;
   });

diff --git 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 && (