⚡️ perf: prefetch page to improve performance (#749)

lobehub · Dec 22, 2023 · 6211be9 · 6211be9
1 parent 8c8221e
commit 6211be9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/src/features/SideBar/TopActions.tsx b/src/features/SideBar/TopActions.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Bot, MessageSquare } from 'lucide-react';
-import { usePathname, useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,37 +14,39 @@ export interface TopActionProps {
 }
 
 const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
-  const pathname = usePathname();
-  const router = useRouter();
   const { t } = useTranslation('common');
   const switchBackToChat = useSessionStore((s) => s.switchBackToChat);
+
   return (
     <>
-      <ActionIcon
-        active={tab === SidebarTabKey.Chat}
-        icon={MessageSquare}
-        onClick={() => {
-          // 如果已经在 chat 路径下了，那么就不用再跳转了
-          if (pathname?.startsWith('/chat')) return;
+      <Link
+        href={'/chat'}
+        onClick={(e) => {
+          e.preventDefault();
           switchBackToChat();
           setTab(SidebarTabKey.Chat);
         }}
-        placement={'right'}
-        size="large"
-        title={t('tab.chat')}
-      />
-      <ActionIcon
-        active={tab === SidebarTabKey.Market}
-        icon={Bot}
-        onClick={() => {
-          if (pathname?.startsWith('/market')) return;
-          router.push('/market');
-          setTab(SidebarTabKey.Market);
-        }}
-        placement={'right'}
-        size="large"
-        title={t('tab.market')}
-      />
+      >
+        <ActionIcon
+          active={tab === SidebarTabKey.Chat}
+          icon={MessageSquare}
+          placement={'right'}
+          size="large"
+          title={t('tab.chat')}
+        />
+      </Link>
+      <Link href={'/market'}>
+        <ActionIcon
+          active={tab === SidebarTabKey.Market}
+          icon={Bot}
+          onClick={() => {
+            setTab(SidebarTabKey.Market);
+          }}
+          placement={'right'}
+          size="large"
+          title={t('tab.market')}
+        />
+      </Link>
     </>
   );
 });

diff --git a/src/layout/GlobalLayout/StoreHydration.tsx b/src/layout/GlobalLayout/StoreHydration.tsx
@@ -29,6 +29,12 @@ const StoreHydration = memo(() => {
     },
     [router],
   );
+  useEffect(() => {
+    router.prefetch('/chat');
+    router.prefetch('/market');
+    router.prefetch('/settings/common');
+    router.prefetch('/settings/agent');
+  }, [router]);
 
   return null;
 });