Update

app/Http/Controllers/FrontHomeController.php

@@ -24,7 +24,7 @@ public function index()
             ];
         });
 
-        return Inertia::render('home/home', [
+        return Inertia::render('home', [
             'stats' => $stats,
         ]);
     }

resources/js/ssr.tsx

@@ -1,23 +1,33 @@
-import '../css/app.css';
-
 import { createInertiaApp } from '@inertiajs/react';
+import createServer from '@inertiajs/react/server';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import { hydrateRoot } from 'react-dom/client';
+import ReactDOMServer from 'react-dom/server';
 import { ErrorBoundary } from 'react-error-boundary';
-
+import { Toaster } from 'sonner';
-import { GA4Provider } from '@/plugins/GA4Context.jsx'; // Updated import
+import { type RouteName, route } from 'ziggy-js';
-import DetailedErrorFallback from './components/custom/detailed-error-fallback'; // Import your component
-import { Toaster } from './components/ui/sonner';
 import { AxiosProvider } from './plugins/AxiosContext';
+import { GA4Provider } from './plugins/GA4Context';
 import { MittProvider } from './plugins/MittContext';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
+createServer((page) =>
     createInertiaApp({
+        page,
+        render: ReactDOMServer.renderToString,
         title: (title) => `${title} - ${appName}`,
         resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
-    setup({ el, App, props }) {
+        setup: ({ App, props }) => {
-        const root = hydrateRoot(el);
+            /* eslint-disable */
+            // @ts-expect-error
+            global.route<RouteName> = (name, params, absolute) =>
+                route(name, params as any, absolute, {
+                    // @ts-expect-error
+                    ...page.props.ziggy,
+                    // @ts-expect-error
+                    location: new URL(page.props.ziggy.location),
+                });
+            /* eslint-enable */
 
             const app = (
                 <ErrorBoundary
@@ -46,11 +56,7 @@ createInertiaApp({
                 </ErrorBoundary>
             );
 
-        root.render(app);
+            return app;
         },
-    progress: {
+    }),
-        color: '#4B5563',
+);
-    },
-});
-
-// Theme is now handled by useTheme hook in components