Refactor prerendering logic to include PrerenderSitemap component, enabling category data handling for the sitemap page. Update Sitemap component to initialize categories and loading state more efficiently, improving performance and clarity.

prerender.cjs

@@ -71,6 +71,7 @@ const Batteriegesetzhinweise =
   require("./src/pages/Batteriegesetzhinweise.js").default;
 const Widerrufsrecht = require("./src/pages/Widerrufsrecht.js").default;
 const Sitemap = require("./src/pages/Sitemap.js").default;
+const PrerenderSitemap = require("./src/PrerenderSitemap.js").default;
 const AGB = require("./src/pages/AGB.js").default;
 const NotFound404 = require("./src/pages/NotFound404.js").default;
 
@@ -361,10 +362,11 @@ const renderApp = async (categoryData, socket) => {
       description: "Widerrufsrecht page",
     },
     {
-      component: Sitemap,
+      component: PrerenderSitemap,
       path: "/sitemap",
       filename: "sitemap",
       description: "Sitemap page",
+      needsCategoryData: true,
     },
     { component: AGB, path: "/agb", filename: "agb", description: "AGB page" },
     { component: NotFound404, path: "/404", filename: "404", description: "404 Not Found page" },
@@ -384,7 +386,9 @@ const renderApp = async (categoryData, socket) => {
 
   let staticPagesRendered = 0;
   for (const page of staticPages) {
-    const pageComponent = React.createElement(page.component, null);
+    // Pass category data as props if needed
+    const pageProps = page.needsCategoryData ? { categoryData } : null;
+    const pageComponent = React.createElement(page.component, pageProps);
     let metaTags = "";
 
     // Special handling for Sitemap page to include category data

src/PrerenderSitemap.js

@@ -0,0 +1,137 @@
+const React = require('react');
+const { 
+  Box, 
+  AppBar, 
+  Toolbar, 
+  Container,
+  Typography,
+  List,
+  ListItem,
+  ListItemText
+} = require('@mui/material');
+const Footer = require('./components/Footer.js').default;
+const { Logo, CategoryList } = require('./components/header/index.js');
+const LegalPage = require('./pages/LegalPage.js').default;
+
+const PrerenderSitemap = ({ categoryData }) => {
+  // Process category data to flatten the hierarchy
+  const collectAllCategories = (categoryNode, categories = [], level = 0) => {
+    if (!categoryNode) return categories;
+    
+    // Add current category (skip root category 209)
+    if (categoryNode.id !== 209 && categoryNode.seoName) {
+      categories.push({
+        id: categoryNode.id,
+        name: categoryNode.name,
+        seoName: categoryNode.seoName,
+        level: level
+      });
+    }
+    
+    // Recursively add children
+    if (categoryNode.children) {
+      for (const child of categoryNode.children) {
+        collectAllCategories(child, categories, level + 1);
+      }
+    }
+    
+    return categories;
+  };
+
+  const categories = categoryData ? collectAllCategories(categoryData) : [];
+
+  const sitemapLinks = [
+    { title: 'Startseite', url: '/' },
+    { title: 'Mein Profil', url: '/profile' },
+    { title: 'Datenschutz', url: '/datenschutz' },
+    { title: 'AGB', url: '/agb' },
+    { title: 'Impressum', url: '/impressum' },
+    { title: 'Batteriegesetzhinweise', url: '/batteriegesetzhinweise' },
+    { title: 'Widerrufsrecht', url: '/widerrufsrecht' },
+    { title: 'Growbox Konfigurator', url: '/Konfigurator' },
+    { title: 'API', url: '/api/', route: false },
+  ];
+
+  const content = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Typography,
+      { variant: 'body1', paragraph: true },
+      'Hier finden Sie eine Übersicht aller verfügbaren Seiten unserer Website.'
+    ),
+    
+    // Static site links
+    React.createElement(
+      Typography,
+      { variant: 'h6', sx: { mt: 3, mb: 2, fontWeight: 'bold' } },
+      'Seiten'
+    ),
+    React.createElement(
+      List,
+      null,
+      sitemapLinks.map((link) => 
+        React.createElement(
+          ListItem,
+          { 
+            key: link.url,
+            button: true,
+            component: link.route === false ? 'a' : 'a',
+            href: link.url,
+            sx: { 
+              py: 1,
+              borderBottom: '1px solid',
+              borderColor: 'divider'
+            }
+          },
+          React.createElement(ListItemText, { primary: link.title })
+        )
+      )
+    ),
+
+    // Category links
+    React.createElement(
+      Typography,
+      { variant: 'h6', sx: { mt: 4, mb: 2, fontWeight: 'bold' } },
+      'Kategorien'
+    ),
+    React.createElement(
+      List,
+      null,
+      categories.map((category) => 
+        React.createElement(
+          ListItem,
+          { 
+            key: category.id,
+            button: true,
+            component: 'a',
+            href: `/Kategorie/${category.seoName}`,
+            sx: { 
+              py: 1,
+              pl: 2 + (category.level * 2), // Indent based on category level
+              borderBottom: '1px solid',
+              borderColor: 'divider'
+            }
+          },
+          React.createElement(
+            ListItemText,
+            { 
+              primary: category.name,
+              sx: {
+                '& .MuiTypography-root': {
+                  fontSize: category.level === 0 ? '1rem' : '0.9rem',
+                  fontWeight: category.level === 0 ? 'bold' : 'normal',
+                  color: category.level === 0 ? 'primary.main' : 'text.primary'
+                }
+              }
+            }
+          )
+        )
+      )
+    )
+  );
+
+  return React.createElement(LegalPage, { title: 'Sitemap', content: content });
+};
+
+module.exports = { default: PrerenderSitemap }; 

src/pages/Sitemap.js

@@ -64,8 +64,10 @@ const initializeCategories = () => {
 };
 
 const Sitemap = () => {
-  const [categories, setCategories] = useState(() => initializeCategories());
-  const [loading, setLoading] = useState(true);
+  // Initialize categories and loading state together
+  const initialCategories = initializeCategories();
+  const [categories, setCategories] = useState(initialCategories);
+  const [loading, setLoading] = useState(initialCategories.length === 0);
   const context = useContext(SocketContext);