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

prerender/renderer.cjs

@@ -207,10 +207,11 @@ const renderPage = (
   // Create script to populate window.productDetailCache for individual product pages
   let productDetailCacheScript = '';
   if (productData && productData.product) {
-    const productDetailCacheData = JSON.stringify(productData.product);
+    // Cache the entire response object (includes product, attributes, etc.)
+    const productDetailCacheData = JSON.stringify(productData);
     productDetailCacheScript = `
     <script>
-      // Populate window.productDetailCache with product data for SPA hydration
+      // Populate window.productDetailCache with complete product data for SPA hydration
       if (!window.productDetailCache) {
         window.productDetailCache = {};
       }

src/PrerenderProduct.js

@@ -79,6 +79,9 @@ class PrerenderProduct extends React.Component {
           )
         )
       ),
+      React.createElement(
+        Box,
+        { sx: { flexGrow: 1 } },
         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: [],
+        komponenten: komponenten,
-        komponentenLoaded: false,
+        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() {
+    // 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
+          // Cache the complete response data (product + attributes)
-          window.productDetailCache[this.props.seoName] = res.product;
+          window.productDetailCache[this.props.seoName] = res;
           
           const komponenten = [];
           if(res.product.komponenten) {