Preact vs Astro 4: The Performance Battle benchmark in High-Scale

// Preact 10.19.0 High-Scale Product Listing Component
// Dependencies: preact@10.19.0, preact-render-to-string@6.2.0
import { h, Component, render } from 'preact';
import { useState, useEffect, useMemo, lazy, Suspense } from 'preact/hooks';

// Error Boundary Component to prevent full app crashes on component errors
class ProductErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Log error to monitoring service (e.g., Sentry, Datadog)
    console.error('Product component crashed:', error, errorInfo);
    // In production, send to error tracking API
    if (process.env.NODE_ENV === 'production') {
      fetch('/api/error-log', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ error: error.message, stack: error.stack, meta: errorInfo })
      }).catch(e => console.error('Failed to log error:', e));
    }
  }

  render() {
    if (this.state.hasError) {
      return (

          Failed to load product
           this.setState({ hasError: false, error: null })}>
            Retry


      );
    }
    return this.props.children;
  }
}

// Lazy load product card to reduce initial bundle size
const LazyProductCard = lazy(() => import('./ProductCard.js'));

// Main Product Grid Component
function ProductGrid({ products = [], isLoading = false }) {
  const [sortBy, setSortBy] = useState('price-asc');
  const [filterCategory, setFilterCategory] = useState('all');

  // Memoize filtered/sorted products to avoid re-computation on re-renders
  const processedProducts = useMemo(() => {
    let filtered = products;
    if (filterCategory !== 'all') {
      filtered = products.filter(p => p.category === filterCategory);
    }
    return [...filtered].sort((a, b) => {
      if (sortBy === 'price-asc') return a.price - b.price;
      if (sortBy === 'price-desc') return b.price - a.price;
      if (sortBy === 'rating-desc') return b.rating - a.rating;
      return 0;
    });
  }, [products, sortBy, filterCategory]);

  // Track TTI and FCP via Performance API
  useEffect(() => {
    if (typeof window !== 'undefined' && window.performance) {
      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (entry.name === 'first-contentful-paint') {
            console.log(`FCP: ${entry.startTime.toFixed(2)}ms`);
          }
          if (entry.name === 'time-to-interactive') {
            console.log(`TTI: ${entry.startTime.toFixed(2)}ms`);
          }
        }
      });
      observer.observe({ entryTypes: ['paint', 'time-to-interactive'] });
      return () => observer.disconnect();
    }
  }, []);

  if (isLoading) {
    return Loading...;
  }

  if (products.length === 0) {
    return No products found;
  }

  return (


         setSortBy(e.target.value)}>
          Price: Low to High
          Price: High to Low
          Highest Rated

         setFilterCategory(e.target.value)}>
          All Categories
          Electronics
          Clothing



        Loading product...}>
          {processedProducts.map(product => (



          ))}



  );
}

// Mock product data fetch with error handling
async function fetchProducts() {
  try {
    const response = await fetch('/api/products?limit=10000');
    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error('Failed to fetch products:', error);
    // Fallback to cached data if available
    const cached = localStorage.getItem('products-cache');
    return cached ? JSON.parse(cached) : [];
  }
}

// Initialize app
if (typeof window !== 'undefined') {
  fetchProducts().then(products => {
    render(, document.getElementById('app'));
  });
}

---
// Astro 4.16.0 High-Scale Product Listing with Islands Architecture
// File: src/pages/products.astro
// Dependencies: astro@4.16.0, @astrojs/node@8.0.0, @astrojs/markdown@3.0.0
import { getCollection } from 'astro:content';
import Layout from '../layouts/Layout.astro';
import ProductCard from '../components/ProductCard.astro';
import InteractiveSort from '../components/InteractiveSort.jsx'; // Preact island
import InteractiveFilter from '../components/InteractiveFilter.jsx'; // Preact island

// Server-side data fetching with error handling
let products = [];
let error = null;
try {
  // Fetch 10k products from API, cached via ISR (revalidate every 60 seconds)
  const response = await fetch('https://api.example.com/products?limit=10000', {
    headers: { 'Cache-Control': 'max-age=60, stale-while-revalidate=30' }
  });
  if (!response.ok) throw new Error(`Failed to fetch products: ${response.statusText}`);
  products = await response.json();
} catch (e) {
  error = e.message;
  // Fallback to static collection if API fails
  try {
    const staticProducts = await getCollection('products');
    products = staticProducts.map(p => ({ ...p.data, id: p.slug }));
  } catch (staticE) {
    console.error('Failed to load static product fallback:', staticE);
  }
}

// Server-side sort/filter (no client JS needed for non-interactive views)
const sortedProducts = products.sort((a, b) => a.price - b.price);
---



    10,000+ Products

    {error && (

        Warning: Using cached product data. API error: {error}

    )}









      {sortedProducts.map(product => (

      ))}




      // Track Core Web Vitals via Performance API
      if (typeof window !== 'undefined' && window.performance) {
        const observer = new PerformanceObserver((list) => {
          for (const entry of list.getEntries()) {
            if (entry.entryType === 'largest-contentful-paint') {
              console.log(`LCP: ${entry.startTime.toFixed(2)}ms`);
              // Send to analytics
              if (window.gtag) {
                gtag('event', 'LCP', { value: Math.round(entry.startTime) });
              }
            }
            if (entry.entryType === 'paint' && entry.name === 'first-contentful-paint') {
              console.log(`FCP: ${entry.startTime.toFixed(2)}ms`);
            }
          }
        });
        observer.observe({ entryTypes: ['paint', 'largest-contentful-paint'] });
      }





  .product-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .api-error {
    background: #fff3cd;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
  }


---
// src/components/InteractiveSort.jsx (Preact Island for Astro)
// This component only hydrates on client, all other components are static
import { h } from 'preact';
import { useState } from 'preact/hooks';

export default function InteractiveSort({ initialSort }) {
  const [sortBy, setSortBy] = useState(initialSort);

  const handleSortChange = (e) => {
    const newSort = e.target.value;
    setSortBy(newSort);
    // Dispatch custom event to update product grid (no full page reload)
    window.dispatchEvent(new CustomEvent('sort-change', { detail: newSort }));
  };

  return (

      Price: Low to High
      Price: High to Low
      Highest Rated

  );
}

// Benchmark Script: Preact vs Astro 4 High-Scale Performance
// Dependencies: puppeteer@22.6.0, bundlephobia-api@1.0.0, express@4.19.0
// Run: node benchmark.js
import puppeteer from 'puppeteer';
import { getPackageStats } from 'bundlephobia-api';
import express from 'express';
import fs from 'fs/promises';
import path from 'path';

// Benchmark configuration
const CONFIG = {
  preactVersion: '10.19.0',
  astroVersion: '4.16.0',
  testUrl: 'http://localhost:3000',
  testIterations: 5,
  networkThrottling: {
    offline: false,
    downloadThroughput: (1.5 * 1024 * 1024) / 8, // 1.5Mbps
    uploadThroughput: (0.75 * 1024 * 1024) / 8, // 0.75Mbps
    latency: 300 // 300ms RTT
  },
  hardware: 'AWS t3.medium (2 vCPU, 4GB RAM)',
  nodeVersion: process.version
};

// Utility to log benchmark results with timestamps
function log(message) {
  console.log(`[${new Date().toISOString()}] ${message}`);
}

// Get bundle size stats from BundlePhobia
async function getBundleStats(packageName, version) {
  try {
    const stats = await getPackageStats(packageName, version);
    return {
      name: packageName,
      version,
      size: stats.size,
      gzip: stats.gzip,
      dependencyCount: stats.dependencyCount
    };
  } catch (error) {
    log(`Failed to get bundle stats for ${packageName}@${version}: ${error.message}`);
    return null;
  }
}

// Start local server for testing
function startTestServer(framework, port) {
  const app = express();
  if (framework === 'preact') {
    app.use(express.static(path.join(process.cwd(), 'preact-build')));
  } else if (framework === 'astro') {
    app.use(express.static(path.join(process.cwd(), 'astro-build')));
  }
  return new Promise((resolve) => {
    const server = app.listen(port, () => {
      log(`Started ${framework} test server on port ${port}`);
      resolve(server);
    });
  });
}

// Run performance benchmark for a given framework
async function runFrameworkBenchmark(framework, browser) {
  log(`Starting benchmark for ${framework}...`);
  const page = await browser.newPage();

  // Set up network throttling
  const client = await page.target().createCDPSession();
  await client.send('Network.emulateNetworkConditions', CONFIG.networkThrottling);

  // Track performance metrics
  const metrics = {
    fcp: [],
    lcp: [],
    tti: [],
    bundleSize: 0,
    transferredBytes: []
  };

  if (framework === 'preact') {
    const bundleStats = await getBundleStats('preact', CONFIG.preactVersion);
    metrics.bundleSize = bundleStats?.gzip || 0;
  } else {
    const bundleStats = await getBundleStats('astro', CONFIG.astroVersion);
    metrics.bundleSize = bundleStats?.gzip || 0;
  }

  for (let i = 0; i < CONFIG.testIterations; i++) {
    log(`Iteration ${i + 1}/${CONFIG.testIterations} for ${framework}`);
    await page.goto(CONFIG.testUrl, { waitUntil: 'networkidle0' });

    const perfEntries = await page.evaluate(() => {
      return JSON.stringify(performance.getEntriesByType('paint').concat(
        performance.getEntriesByType('largest-contentful-paint'),
        performance.getEntriesByType('time-to-interactive')
      ));
    });
    const entries = JSON.parse(perfEntries);

    const fcpEntry = entries.find(e => e.name === 'first-contentful-paint');
    const lcpEntry = entries.find(e => e.entryType === 'largest-contentful-paint');
    const ttiEntry = entries.find(e => e.entryType === 'time-to-interactive');

    if (fcpEntry) metrics.fcp.push(fcpEntry.startTime);
    if (lcpEntry) metrics.lcp.push(lcpEntry.startTime);
    if (ttiEntry) metrics.tti.push(ttiEntry.startTime);

    const transferStats = await page.evaluate(() => {
      const resources = performance.getEntriesByType('resource');
      return resources.reduce((total, r) => total + (r.transferSize || 0), 0);
    });
    metrics.transferredBytes.push(transferStats);
    await page.reload({ waitUntil: 'networkidle0' });
  }

  await page.close();
  const avg = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;
  return {
    framework,
    avgFCP: avg(metrics.fcp).toFixed(2),
    avgLCP: avg(metrics.lcp).toFixed(2),
    avgTTI: avg(metrics.tti).toFixed(2),
    avgTransferredBytes: avg(metrics.transferredBytes).toFixed(0),
    bundleSize: metrics.bundleSize
  };
}

async function runBenchmark() {
  log('Starting Preact vs Astro 4 High-Scale Benchmark');
  log(`Hardware: ${CONFIG.hardware}`);
  log(`Node Version: ${CONFIG.nodeVersion}`);

  const preactServer = await startTestServer('preact', 3000);
  const astroServer = await startTestServer('astro', 3001);

  const browser = await puppeteer.launch({
    headless: 'new',
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  try {
    const preactResults = await runFrameworkBenchmark('preact', browser);
    CONFIG.testUrl = 'http://localhost:3001';
    const astroResults = await runFrameworkBenchmark('astro', browser);

    log('\n=== Benchmark Results ===');
    log(`Preact ${CONFIG.preactVersion}:`);
    log(`  Avg FCP: ${preactResults.avgFCP}ms`);
    log(`  Avg LCP: ${preactResults.avgLCP}ms`);
    log(`  Avg TTI: ${preactResults.avgTTI}ms`);
    log(`  Avg Transferred Bytes: ${preactResults.avgTransferredBytes}`);
    log(`  Bundle Size (gzip): ${preactResults.bundleSize}B`);

    log(`\nAstro ${CONFIG.astroVersion}:`);
    log(`  Avg FCP: ${astroResults.avgFCP}ms`);
    log(`  Avg LCP: ${astroResults.avgLCP}ms`);
    log(`  Avg TTI: ${astroResults.avgTTI}ms`);
    log(`  Avg Transferred Bytes: ${astroResults.avgTransferredBytes}`);
    log(`  Bundle Size (gzip): ${astroResults.bundleSize}B`);

    await fs.writeFile(
      'benchmark-results.json',
      JSON.stringify({ preact: preactResults, astro: astroResults, config: CONFIG }, null, 2)
    );
    log('Results saved to benchmark-results.json');
  } catch (error) {
    log(`Benchmark failed: ${error.message}`);
    throw error;
  } finally {
    await browser.close();
    preactServer.close();
    astroServer.close();
  }
}

if (import.meta.url === `file://${process.argv[1]}`) {
  runBenchmark().catch(console.error);
}

// vite.config.js for Preact tree shaking
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
  build: {
    rollupOptions: {
      treeshake: 'smallest', // Aggressive dead code elimination
    },
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // Remove console logs in production
        drop_debugger: true
      }
    }
  }
});

# Lighthouse CI config (lighthouserc.js)
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/products'],
      throttling: {
        cpuThrottling: 4, // Simulate slow device
        networkThrottling: 'Slow 3G'
      }
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'audit:time-to-interactive': ['error', { maxNumericValue: 3000 }]
      }
    }
  }
};