@lobehub/lobehub 2.0.0-next.90 → 2.0.0-next.91

package/src/app/[variants]/desktopRouter.config.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import { useEffect } from 'react';
-import { type LoaderFunction, createBrowserRouter, redirect, useNavigate } from 'react-router-dom';
+import { createBrowserRouter, redirect, useNavigate, useRouteError } from 'react-router-dom';
 
+import ErrorCapture from '@/components/Error';
 import Loading from '@/components/Loading/BrandTextLoading';
 import { useGlobalStore } from '@/store/global';
 import type { Locales } from '@/types/locale';
@@ -10,6 +12,213 @@ import type { Locales } from '@/types/locale';
 import DesktopMainLayout from './(main)/layouts/desktop';
 import { idLoader, slugLoader } from './loaders/routeParams';
 
+/**
+ * Desktop Router Configuration - Pure CSR Mode
+ *
+ * IMPORTANT: This router runs ONLY in the browser (client-side).
+ *
+ * Key characteristics:
+ * - createBrowserRouter uses window.history API (client-only)
+ * - All loaders execute in the browser during navigation
+ * - No server-side rendering or hydration involved
+ * - Route data fetching happens on-demand during client navigation
+ *
+ * The entire router tree is wrapped with Next.js dynamic import (ssr: false),
+ * ensuring this code never executes on the server.
+ */
+
+// Chat components
+const DesktopChatPage = dynamic(
+  () => import('./(main)/chat/index').then((m) => m.DesktopChatPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const ChatLayout = dynamic(() => import('./(main)/chat/_layout/Desktop'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+
+// Discover List components
+const DesktopHomePage = dynamic(
+  () => import('./(main)/discover/(list)/(home)/index').then((m) => m.DesktopHomePage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DesktopAssistantPage = dynamic(
+  () => import('./(main)/discover/(list)/assistant/index').then((m) => m.DesktopAssistantPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverAssistantLayout = dynamic(
+  () => import('./(main)/discover/(list)/assistant/_layout/Desktop'),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverListMcpPage = dynamic(
+  () => import('./(main)/discover/(list)/mcp/index').then((m) => m.DesktopMcpPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverMcpLayout = dynamic(() => import('./(main)/discover/(list)/mcp/_layout/Desktop'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const DiscoverListModelPage = dynamic(
+  () => import('./(main)/discover/(list)/model/index').then((m) => m.DesktopModelPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverModelLayout = dynamic(
+  () => import('./(main)/discover/(list)/model/_layout/Desktop'),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverListProviderPage = dynamic(
+  () => import('./(main)/discover/(list)/provider/index').then((m) => m.DesktopProviderPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverListLayout = dynamic(() => import('./(main)/discover/(list)/_layout/Desktop/index'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+
+// Discover Detail components
+const DesktopDiscoverAssistantDetailPage = dynamic(
+  () =>
+    import('./(main)/discover/(detail)/assistant/index').then(
+      (m) => m.DesktopDiscoverAssistantDetailPage,
+    ),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverDetailMcpPage = dynamic(
+  () => import('./(main)/discover/(detail)/mcp/index').then((m) => m.DesktopMcpPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverDetailModelPage = dynamic(
+  () => import('./(main)/discover/(detail)/model/index').then((m) => m.DesktopModelPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverDetailProviderPage = dynamic(
+  () => import('./(main)/discover/(detail)/provider/index').then((m) => m.DesktopProviderPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DiscoverDetailLayout = dynamic(() => import('./(main)/discover/(detail)/_layout/Desktop'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const DiscoverLayout = dynamic(() => import('./(main)/discover/_layout/Desktop/index'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+
+// Knowledge components
+const KnowledgeHome = dynamic(() => import('./(main)/knowledge/routes/KnowledgeHome'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const KnowledgeBasesList = dynamic(() => import('./(main)/knowledge/routes/KnowledgeBasesList'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const KnowledgeBaseDetail = dynamic(() => import('./(main)/knowledge/routes/KnowledgeBaseDetail'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const KnowledgeLayout = dynamic(() => import('./(main)/knowledge/_layout/Desktop'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+
+// Settings components
+const SettingsLayout = dynamic(() => import('./(main)/settings/_layout/Desktop'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const SettingsLayoutWrapper = dynamic(() => import('./(main)/settings/_layout/DesktopWrapper'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+
+// Image components
+const ImagePage = dynamic(() => import('./(main)/image'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const ImageLayoutWrapper = dynamic(() => import('./(main)/image/_layout/DesktopWrapper'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+
+// Labs components
+const LabsPage = dynamic(() => import('./(main)/labs'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+
+// Profile components
+const ProfileHomePage = dynamic(() => import('./(main)/profile/(home)/desktop'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const ProfileApikeyPage = dynamic(() => import('./(main)/profile/apikey/index'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const DesktopProfileSecurityPage = dynamic(
+  () => import('./(main)/profile/security/index').then((m) => m.DesktopProfileSecurityPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DesktopProfileStatsPage = dynamic(
+  () => import('./(main)/profile/stats/index').then((m) => m.DesktopProfileStatsPage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const DesktopProfileUsagePage = dynamic(
+  () => import('./(main)/profile/usage/index').then((m) => m.DesktopProfileUsagePage),
+  {
+    loading: () => <Loading />,
+    ssr: false,
+  },
+);
+const ProfileLayoutWrapper = dynamic(() => import('./(main)/profile/_layout/DesktopWrapper'), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+
 // Component to register navigate function in global store
 const NavigatorRegistrar = () => {
   const navigate = useNavigate();
@@ -25,50 +234,57 @@ const NavigatorRegistrar = () => {
   return null;
 };
 
-// Root layout wrapper component - just registers navigator and renders outlet
-// Note: Desktop layout is provided by individual route components
-const RootLayout = (props: { locale: Locales }) => {
-  return (
-    <>
-      <NavigatorRegistrar />
-      <DesktopMainLayout locale={props.locale} />
-    </>
-  );
-};
+// Error boundary factory for React Router errorElement
+const createErrorBoundary = (resetPath: string) => {
+  const ErrorBoundary = () => {
+    const error = useRouteError() as Error;
+    const navigate = useNavigate();
 
-// Hydration gate loader -always return true to bypass hydration gate
-const hydrationGateLoader: LoaderFunction = () => {
-  return true
+    const reset = () => {
+      navigate(resetPath);
+    };
+
+    return <ErrorCapture error={error} reset={reset} />;
+  };
+  return ErrorBoundary;
 };
 
+// Create error boundaries for each route
+const ChatErrorBoundary = createErrorBoundary('/chat');
+const DiscoverErrorBoundary = createErrorBoundary('/discover');
+const KnowledgeErrorBoundary = createErrorBoundary('/knowledge');
+const SettingsErrorBoundary = createErrorBoundary('/settings');
+const ImageErrorBoundary = createErrorBoundary('/image');
+const ProfileErrorBoundary = createErrorBoundary('/profile');
+const RootErrorBoundary = createErrorBoundary('/chat'); // Root level falls back to chat
+
+// Root layout wrapper component
+const RootLayout = (props: { locale: Locales }) => (
+  <>
+    <NavigatorRegistrar />
+    <DesktopMainLayout locale={props.locale} />
+  </>
+);
+
 // Create desktop router configuration
 export const createDesktopRouter = (locale: Locales) =>
   createBrowserRouter([
     {
-      HydrateFallback: () => <Loading />,
       children: [
         // Chat routes
         {
           children: [
             {
+              element: <DesktopChatPage />,
               index: true,
-              lazy: () =>
-                import('./(main)/chat/index').then((m) => ({
-                  Component: m.DesktopChatPage,
-                })),
             },
             {
-              lazy: () =>
-                import('./(main)/chat/index').then((m) => ({
-                  Component: m.DesktopChatPage,
-                })),
+              element: <DesktopChatPage />,
               path: '*',
             },
           ],
-          lazy: () =>
-            import('./(main)/chat/_layout/Desktop').then((m) => ({
-              Component: m.default,
-            })),
+          element: <ChatLayout />,
+          errorElement: <ChatErrorBoundary />,
           path: 'chat',
         },
 
@@ -81,117 +297,73 @@ export const createDesktopRouter = (locale: Locales) =>
                 {
                   children: [
                     {
+                      element: <DesktopAssistantPage />,
                       index: true,
-                      lazy: () =>
-                        import('./(main)/discover/(list)/assistant/index').then((m) => ({
-                          Component: m.DesktopAssistantPage,
-                        })),
                     },
                   ],
-                  lazy: () =>
-                    import('./(main)/discover/(list)/assistant/_layout/Desktop').then((m) => ({
-                      Component: m.default,
-                    })),
+                  element: <DiscoverAssistantLayout />,
                   path: 'assistant',
                 },
                 {
                   children: [
                     {
+                      element: <DiscoverListModelPage />,
                       index: true,
-                      lazy: () =>
-                        import('./(main)/discover/(list)/model/index').then((m) => ({
-                          Component: m.DesktopModelPage,
-                        })),
                     },
                   ],
-                  lazy: () =>
-                    import('./(main)/discover/(list)/model/_layout/Desktop').then((m) => ({
-                      Component: m.default,
-                    })),
+                  element: <DiscoverModelLayout />,
                   path: 'model',
                 },
                 {
-                  lazy: () =>
-                    import('./(main)/discover/(list)/provider/index').then((m) => ({
-                      Component: m.DesktopProviderPage,
-                    })),
+                  element: <DiscoverListProviderPage />,
                   path: 'provider',
                 },
                 {
                   children: [
                     {
+                      element: <DiscoverListMcpPage />,
                       index: true,
-                      lazy: () =>
-                        import('./(main)/discover/(list)/mcp/index').then((m) => ({
-                          Component: m.DesktopMcpPage,
-                        })),
                     },
                   ],
-                  lazy: () =>
-                    import('./(main)/discover/(list)/mcp/_layout/Desktop').then((m) => ({
-                      Component: m.default,
-                    })),
+                  element: <DiscoverMcpLayout />,
                   path: 'mcp',
                 },
                 {
+                  element: <DesktopHomePage />,
                   index: true,
-                  lazy: () =>
-                    import('./(main)/discover/(list)/(home)/index').then((m) => ({
-                      Component: m.DesktopHomePage,
-                    })),
                 },
               ],
-              lazy: () =>
-                import('./(main)/discover/(list)/_layout/Desktop/index').then((m) => ({
-                  Component: m.default,
-                })),
+              element: <DiscoverListLayout />,
             },
             // Detail routes (with DetailLayout)
             {
               children: [
                 {
-                  lazy: () =>
-                    import('./(main)/discover/(detail)/assistant/index').then((m) => ({
-                      Component: m.DesktopDiscoverAssistantDetailPage,
-                    })),
+                  element: <DesktopDiscoverAssistantDetailPage />,
                   loader: slugLoader,
                   path: 'assistant/:slug',
                 },
                 {
-                  lazy: () =>
-                    import('./(main)/discover/(detail)/model/index').then((m) => ({
-                      Component: m.DesktopModelPage,
-                    })),
+                  element: <DiscoverDetailModelPage />,
                   loader: slugLoader,
                   path: 'model/:slug',
                 },
                 {
-                  lazy: () =>
-                    import('./(main)/discover/(detail)/provider/index').then((m) => ({
-                      Component: m.DesktopProviderPage,
-                    })),
+                  element: <DiscoverDetailProviderPage />,
                   loader: slugLoader,
                   path: 'provider/:slug',
                 },
                 {
-                  lazy: () =>
-                    import('./(main)/discover/(detail)/mcp/index').then((m) => ({
-                      Component: m.DesktopMcpPage,
-                    })),
+                  element: <DiscoverDetailMcpPage />,
                   loader: slugLoader,
                   path: 'mcp/:slug',
                 },
               ],
-              lazy: () =>
-                import('./(main)/discover/(detail)/_layout/Desktop').then((m) => ({
-                  Component: m.default,
-                })),
+              element: <DiscoverDetailLayout />,
             },
           ],
-          lazy: () =>
-            import('./(main)/discover/_layout/Desktop/index').then((m) => ({
-              Component: m.default,
-            })),
+          element: <DiscoverLayout />,
+          errorElement: <DiscoverErrorBoundary />,
           path: 'discover',
         },
 
@@ -199,40 +371,26 @@ export const createDesktopRouter = (locale: Locales) =>
         {
           children: [
             {
+              element: <KnowledgeHome />,
               index: true,
-              lazy: () =>
-                import('./(main)/knowledge/routes/KnowledgeHome').then((m) => ({
-                  Component: m.default,
-                })),
             },
             {
-              lazy: () =>
-                import('./(main)/knowledge/routes/KnowledgeBasesList').then((m) => ({
-                  Component: m.default,
-                })),
+              element: <KnowledgeBasesList />,
               path: 'bases',
             },
             {
-              lazy: () =>
-                import('./(main)/knowledge/routes/KnowledgeBaseDetail').then((m) => ({
-                  Component: m.default,
-                })),
+              element: <KnowledgeBaseDetail />,
               loader: idLoader,
               path: 'bases/:id',
             },
             {
-              lazy: () =>
-                import('./(main)/knowledge/routes/KnowledgeBaseDetail').then((m) => ({
-                  Component: m.default,
-                })),
+              element: <KnowledgeBaseDetail />,
               loader: idLoader,
               path: '*',
             },
           ],
-          lazy: () =>
-            import('./(main)/knowledge/_layout/Desktop').then((m) => ({
-              Component: m.default,
-            })),
+          element: <KnowledgeLayout />,
+          errorElement: <KnowledgeErrorBoundary />,
           path: 'knowledge',
         },
 
@@ -240,17 +398,12 @@ export const createDesktopRouter = (locale: Locales) =>
         {
           children: [
             {
+              element: <SettingsLayout />,
               index: true,
-              lazy: () =>
-                import('./(main)/settings/_layout/Desktop').then((m) => ({
-                  Component: m.default,
-                })),
             },
           ],
-          lazy: () =>
-            import('./(main)/settings/_layout/DesktopWrapper').then((m) => ({
-              Component: m.default,
-            })),
+          element: <SettingsLayoutWrapper />,
+          errorElement: <SettingsErrorBoundary />,
           path: 'settings',
         },
 
@@ -258,26 +411,18 @@ export const createDesktopRouter = (locale: Locales) =>
         {
           children: [
             {
+              element: <ImagePage />,
               index: true,
-              lazy: () =>
-                import('./(main)/image').then((m) => ({
-                  Component: m.default,
-                })),
             },
           ],
-          lazy: () =>
-            import('./(main)/image/_layout/DesktopWrapper').then((m) => ({
-              Component: m.default,
-            })),
+          element: <ImageLayoutWrapper />,
+          errorElement: <ImageErrorBoundary />,
           path: 'image',
         },
 
         // Labs routes
         {
-          lazy: () =>
-            import('./(main)/labs').then((m) => ({
-              Component: m.default,
-            })),
+          element: <LabsPage />,
           path: 'labs',
         },
 
@@ -285,45 +430,28 @@ export const createDesktopRouter = (locale: Locales) =>
         {
           children: [
             {
+              element: <ProfileHomePage />,
               index: true,
-              lazy: () =>
-                import('./(main)/profile/(home)/desktop').then((m) => ({
-                  Component: m.default,
-                })),
             },
             {
-              lazy: () =>
-                import('./(main)/profile/apikey/index').then((m) => ({
-                  Component: m.default,
-                })),
+              element: <ProfileApikeyPage />,
               path: 'apikey',
             },
             {
-              lazy: () =>
-                import('./(main)/profile/security/index').then((m) => ({
-                  Component: m.DesktopProfileSecurityPage,
-                })),
+              element: <DesktopProfileSecurityPage />,
               path: 'security',
             },
             {
-              lazy: () =>
-                import('./(main)/profile/stats/index').then((m) => ({
-                  Component: m.DesktopProfileStatsPage,
-                })),
+              element: <DesktopProfileStatsPage />,
               path: 'stats',
             },
             {
-              lazy: () =>
-                import('./(main)/profile/usage/index').then((m) => ({
-                  Component: m.DesktopProfileUsagePage,
-                })),
+              element: <DesktopProfileUsagePage />,
               path: 'usage',
             },
           ],
-          lazy: () =>
-            import('./(main)/profile/_layout/DesktopWrapper').then((m) => ({
-              Component: m.default,
-            })),
+          element: <ProfileLayoutWrapper />,
+          errorElement: <ProfileErrorBoundary />,
           path: 'profile',
         },
 
@@ -340,7 +468,7 @@ export const createDesktopRouter = (locale: Locales) =>
         },
       ],
       element: <RootLayout locale={locale} />,
-      loader: hydrationGateLoader,
+      errorElement: <RootErrorBoundary />,
       path: '/',
     },
   ]);