feat: update product detail caching and component loading logic for improved SPA performance

src/PrerenderProduct.js

@@ -81,15 +81,18 @@ class PrerenderProduct extends React.Component {
       ),
       React.createElement(
         Box,
-        {
-          sx: {
-            p: { xs: 2, md: 2 },
-            pb: { xs: 4, md: 8 },
-            maxWidth: "1400px",
-            mx: "auto",
-            flexGrow: 1
-          }
-        },
+        { sx: { flexGrow: 1 } },
+        React.createElement(
+          Box,
+          {
+            sx: {
+              p: { xs: 2, md: 2 },
+              pb: { xs: 4, md: 8 },
+              maxWidth: "1400px",
+              mx: "auto",
+              flexGrow: 1
+            }
+          },
         // Back button (breadcrumbs section)
         React.createElement(
           Box,
@@ -442,6 +445,7 @@ class PrerenderProduct extends React.Component {
             )
           )
         )
+      )
       ),
       React.createElement(Footer)
     );

src/components/ProductDetailPage.js

@@ -25,16 +25,28 @@ class ProductDetailPage extends Component {
       window.productDetailCache &&
       window.productDetailCache[this.props.seoName]
     ) {
+      const cachedData = window.productDetailCache[this.props.seoName];
+      
+      // Initialize komponenten from cached product data
+      const komponenten = [];
+      if(cachedData.product.komponenten) {
+        for(const komponent of cachedData.product.komponenten.split(",")) {
+          // Handle both "x" and "×" as separators
+          const [id, count] = komponent.split(/[x×]/);
+          komponenten.push({id: id.trim(), count: count.trim()});
+        }
+      }
+      
       this.state = {
-        product: window.productDetailCache[this.props.seoName],
+        product: cachedData.product,
         loading: false,
         error: null,
         attributeImages: {},
-        attributes: [],
+        attributes: cachedData.attributes || [],
         isSteckling: false,
         imageDialogOpen: false,
-        komponenten: [],
-        komponentenLoaded: false,
+        komponenten: komponenten,
+        komponentenLoaded: komponenten.length === 0, // If no komponenten, mark as loaded
         komponentenData: {}, // Store individual komponent data with loading states
         komponentenImages: {}, // Store tiny pictures for komponenten
         totalKomponentenPrice: 0,
@@ -68,7 +80,17 @@ class ProductDetailPage extends Component {
   }
 
   componentDidMount() {
-    this.loadProductData();
+    // Only load product data if not already cached
+    if (!this.state.product) {
+      this.loadProductData();
+    } else {
+      // Product is cached, but we still need to load komponenten if they exist
+      if (this.state.komponenten.length > 0 && !this.state.komponentenLoaded) {
+        for(const komponent of this.state.komponenten) {
+          this.loadKomponent(komponent.id, komponent.count);
+        }
+      }
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -350,8 +372,8 @@ class ProductDetailPage extends Component {
             window.productDetailCache = {};
           }
           
-          // Cache the product data
-          window.productDetailCache[this.props.seoName] = res.product;
+          // Cache the complete response data (product + attributes)
+          window.productDetailCache[this.props.seoName] = res;
           
           const komponenten = [];
           if(res.product.komponenten) {