feat: enhance product detail caching for SPA hydration and improve rendering logic

prerender.cjs

@@ -202,7 +202,8 @@ const renderProductWorker = async (productSeoNames, workerId, progressCallback,
           combinedMetaTags,
           true,
           config,
-          true // Suppress logs during parallel rendering to avoid interfering with progress bar
+          true, // Suppress logs during parallel rendering to avoid interfering with progress bar
+          productDetails // Pass product data for cache population
         );
 
         if (success) {

prerender/renderer.cjs

@@ -17,7 +17,8 @@ const renderPage = (
   metaTags = "",
   needsRouter = false,
   config,
-  suppressLogs = false
+  suppressLogs = false,
+  productData = null
 ) => {
   const {
     isProduction,
@@ -203,6 +204,21 @@ const renderPage = (
     `;
   }
 
+  // Create script to populate window.productDetailCache for individual product pages
+  let productDetailCacheScript = '';
+  if (productData && productData.product) {
+    const productDetailCacheData = JSON.stringify(productData.product);
+    productDetailCacheScript = `
+    <script>
+      // Populate window.productDetailCache with product data for SPA hydration
+      if (!window.productDetailCache) {
+        window.productDetailCache = {};
+      }
+      window.productDetailCache['${productData.product.seoName}'] = ${productDetailCacheData};
+    </script>
+    `;
+  }
+
   // Combine all CSS (global + inlined) into a single optimized style tag
   const combinedCss = globalCss + (inlinedCss ? '\n' + inlinedCss : '');
   const combinedCssTag = combinedCss ? `<style type="text/css">${combinedCss}</style>` : '';
@@ -214,7 +230,7 @@ const renderPage = (
   
   template = template.replace(
     "</head>",
-    `${resourceHints}${combinedCssTag}${additionalTags}${metaTags}${prerenderFallbackScript}${productCacheScript}</head>`
+    `${resourceHints}${combinedCssTag}${additionalTags}${metaTags}${prerenderFallbackScript}${productCacheScript}${productDetailCacheScript}</head>`
   );
 
   const rootDivRegex = /<div id="root"[\s\S]*?>[\s\S]*?<\/div>/;
@@ -244,6 +260,9 @@ const renderPage = (
     console.log(`   - Total inlined CSS: ${Math.round(combinedCss.length / 1024)}KB`);
     console.log(`   - Render-blocking CSS eliminated: ${inlinedCss ? 'YES' : 'NO'}`);
     console.log(`   - Fallback content saved to window.__PRERENDER_FALLBACK__`);
+    if (productDetailCacheScript) {
+      console.log(`   - Product detail cache populated for SPA hydration`);
+    }
   }
 
   return true;

src/components/ProductDetailPage.js

@@ -585,6 +585,7 @@ class ProductDetailPage extends Component {
           pb: { xs: 4, md: 8 },
           maxWidth: "1400px",
           mx: "auto",
+          flexGrow: 1
         }}
       >
         {/* Breadcrumbs */}