Preact vs GraphQL: The Truth About cross-platform in High-Scale

// Preact 10.19.3 Cross-Platform Renderer (Web + SSR)\n// Benchmark: Moto G4, Chrome 120, 3G Slow\nimport { h, render, Component } from 'preact';\nimport { renderToString } from 'preact-render-to-string';\nimport { useState, useEffect } from 'preact/hooks';\n\n// Error Boundary Component\nclass ErrorBoundary extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    console.error('Preact Error Boundary caught:', error, errorInfo);\n    if (window.Sentry) {\n      window.Sentry.captureException(error, { extra: errorInfo });\n    }\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return h('div', { class: 'error-fallback' }, [\n        h('h2', null, 'Something went wrong'),\n        h('p', null, this.state.error?.message || 'Unknown error'),\n        h('button', { onClick: () => this.setState({ hasError: false }) }, 'Retry')\n      ]);\n    }\n    return this.props.children;\n  }\n}\n\n// User List Component\nfunction UserList() {\n  const [users, setUsers] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchUsers = async () => {\n      try {\n        const res = await fetch('https://api.example.com/users');\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const data = await res.json();\n        setUsers(data);\n      } catch (err) {\n        setError(err);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchUsers();\n  }, []);\n\n  if (loading) return h('div', { class: 'loading' }, 'Loading users...');\n  if (error) return h('div', { class: 'error' }, `Error: ${error.message}`);\n\n  return h('ul', { class: 'user-list' },\n    users.map(user => h('li', { key: user.id }, [\n      h('img', { src: user.avatar, alt: user.name, width: 40, height: 40 }),\n      h('span', null, user.name)\n    ]))\n  );\n}\n\n// App Root\nfunction App() {\n  return h(ErrorBoundary, null,\n    h('div', { class: 'app' }, [\n      h('header', null, h('h1', null, 'Cross-Platform Preact App')),\n      h(UserList, null)\n    ])\n  );\n}\n\n// Client-side render (web target)\nif (typeof window !== 'undefined') {\n  const root = document.getElementById('app');\n  if (root) {\n    render(h(App, null), root);\n  } else {\n    console.error('No #app element found for client render');\n  }\n}\n\n// Server-side render (Node.js target)\nexport function ssrRender() {\n  try {\n    const html = renderToString(h(App, null));\n    return `\n\n\n\n  ${html}\n\n`;\n  } catch (err) {\n    console.error('SSR render failed:', err);\n    return `500 Server Error`;\n  }\n}

// GraphQL-js 16.8.1 API Server with Express 4.18.2\n// Benchmark: AWS c6g.2xlarge, Node 20.11.0, 10k concurrent connections\nconst { graphql, GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLList, GraphQLInt, GraphQLNonNull } = require('graphql');\nconst express = require('express');\nconst rateLimit = require('express-rate-limit');\nconst { graphqlHTTP } = require('express-graphql');\nconst Sentry = require('@sentry/node');\n\nSentry.init({ dsn: process.env.SENTRY_DSN, environment: process.env.NODE_ENV || 'development' });\n\nconst users = Array.from({ length: 10000 }, (_, i) => ({\n  id: i + 1,\n  name: `User ${i + 1}`,\n  email: `user${i + 1}@example.com`,\n  avatar: `https://i.pravatar.cc/40?u=${i + 1}`\n}));\n\nconst UserType = new GraphQLObjectType({\n  name: 'User',\n  fields: () => ({\n    id: { type: new GraphQLNonNull(GraphQLInt) },\n    name: { type: new GraphQLNonNull(GraphQLString) },\n    email: { type: new GraphQLNonNull(GraphQLString) },\n    avatar: { type: GraphQLString }\n  })\n});\n\nconst RootQuery = new GraphQLObjectType({\n  name: 'RootQuery',\n  fields: () => ({\n    users: {\n      type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(UserType))),\n      args: {\n        limit: { type: GraphQLInt, defaultValue: 10 },\n        offset: { type: GraphQLInt, defaultValue: 0 }\n      },\n      resolve: (parent, { limit, offset }, context) => {\n        if (limit < 1 || limit > 100) throw new Error('Limit must be between 1 and 100');\n        if (offset < 0) throw new Error('Offset must be non-negative');\n        return new Promise((resolve) => {\n          setTimeout(() => resolve(users.slice(offset, offset + limit)), 10);\n        });\n      }\n    },\n    user: {\n      type: UserType,\n      args: { id: { type: new GraphQLNonNull(GraphQLInt) } },\n      resolve: (parent, { id }) => {\n        const user = users.find(u => u.id === id);\n        if (!user) throw new Error(`User ${id} not found`);\n        return user;\n      }\n    }\n  })\n});\n\nconst RootMutation = new GraphQLObjectType({\n  name: 'RootMutation',\n  fields: () => ({\n    updateUserName: {\n      type: UserType,\n      args: {\n        id: { type: new GraphQLNonNull(GraphQLInt) },\n        name: { type: new GraphQLNonNull(GraphQLString) }\n      },\n      resolve: (parent, { id, name }, context) => {\n        if (!context.user) throw new Error('Unauthorized');\n        const user = users.find(u => u.id === id);\n        if (!user) throw new Error(`User ${id} not found`);\n        user.name = name;\n        return user;\n      }\n    }\n  })\n});\n\nconst schema = new GraphQLSchema({ query: RootQuery, mutation: RootMutation });\n\nconst app = express();\napp.use(Sentry.Handlers.requestHandler());\n\nconst graphqlLimiter = rateLimit({\n  windowMs: 15 * 60 * 1000,\n  max: 1000,\n  message: 'Too many GraphQL requests, please try again later'\n});\n\napp.use('/graphql', graphqlLimiter, graphqlHTTP((req) => ({\n  schema,\n  context: { user: req.user },\n  graphiql: process.env.NODE_ENV === 'development',\n  customFormatErrorFn: (err) => {\n    Sentry.captureException(err);\n    return { message: err.message, locations: err.locations, path: err.path };\n  }\n})));\n\napp.use(Sentry.Handlers.errorHandler());\n\nconst PORT = process.env.PORT || 4000;\napp.listen(PORT, () => console.log(`GraphQL server running on http://localhost:${PORT}/graphql`));\n\nmodule.exports = { app, schema };

// Cross-Platform Benchmark Script: Preact SSR vs GraphQL API\n// Hardware: AWS c6g.2xlarge (8 vCPU, 16GB RAM)\n// Node: 20.11.0, Preact 10.19.3, GraphQL-js 16.8.1\nconst autocannon = require('autocannon');\nconst { ssrRender } = require('./preact-ssr.js');\nconst { app: graphqlApp, schema } = require('./graphql-server.js');\nconst http = require('http');\n\nconst BENCHMARK_DURATION = 30;\nconst CONCURRENT_CONNECTIONS = 1000;\n\nasync function runBenchmark(name, url, method = 'GET', body = null) {\n  console.log(`Running ${name} benchmark...`);\n  const result = await autocannon({\n    url,\n    method,\n    body: body ? JSON.stringify(body) : null,\n    headers: body ? { 'Content-Type': 'application/json' } : {},\n    connections: CONCURRENT_CONNECTIONS,\n    duration: BENCHMARK_DURATION,\n    setupClient: (client) => {\n      client.on('error', (err) => console.error(`${name} client error:`, err));\n    }\n  });\n  console.log(`${name} Results:\n  Requests/s: ${result.requests.mean}\n  Latency p50: ${result.latency.p50}ms\n  Latency p99: ${result.latency.p99}ms\n  Errors: ${result.errors}`);\n  return result;\n}\n\nasync function benchmarkPreactSSR() {\n  const server = http.createServer((req, res) => {\n    try {\n      if (req.url === '/ssr') {\n        res.writeHead(200, { 'Content-Type': 'text/html' });\n        res.end(ssrRender());\n      } else {\n        res.writeHead(404);\n        res.end('Not Found');\n      }\n    } catch (err) {\n      console.error('Preact SSR error:', err);\n      res.writeHead(500);\n      res.end('Server Error');\n    }\n  });\n  server.listen(3000, () => console.log('Preact SSR on 3000'));\n  const result = await runBenchmark('Preact SSR', 'http://localhost:3000/ssr');\n  server.close();\n  return result;\n}\n\nasync function benchmarkGraphQL() {\n  const server = graphqlApp.listen(4000, () => console.log('GraphQL on 4000'));\n  const result = await runBenchmark(\n    'GraphQL API',\n    'http://localhost:4000/graphql',\n    'POST',\n    { query: '{ users(limit: 10) { id name avatar } }' }\n  );\n  server.close();\n  return result;\n}\n\nasync function main() {\n  try {\n    const [preactRes, graphqlRes] = await Promise.all([\n      benchmarkPreactSSR(),\n      benchmarkGraphQL()\n    ]);\n    console.log(`\n=== Comparison ===\nPreact SSR: ${preactRes.requests.mean} req/s, p99 ${preactRes.latency.p99}ms\nGraphQL API: ${graphqlRes.requests.mean} req/s, p99 ${graphqlRes.latency.p99}ms`);\n  } catch (err) {\n    console.error('Benchmark failed:', err);\n    process.exit(1);\n  }\n}\n\nif (require.main === module) main();\n\nmodule.exports = { runBenchmark, benchmarkPreactSSR, benchmarkGraphQL };

// Bad: Imports entire Preact library\nimport * as preact from 'preact';\n\n// Good: Imports only used exports\nimport { h, render, useState } from 'preact';\n\n// Rollup config for tree shaking\nimport resolve from '@rollup/plugin-node-resolve';\nexport default {\n  input: 'src/index.js',\n  output: { file: 'dist/bundle.js', format: 'esm' },\n  plugins: [resolve()],\n  external: ['preact']\n};

import depthLimit from 'graphql-depth-limit';\nimport { graphqlHTTP } from 'express-graphql';\n\napp.use('/graphql', graphqlHTTP({\n  schema,\n  validationRules: [depthLimit(7)],\n  graphiql: process.env.NODE_ENV === 'development'\n}));

// codegen.ts configuration\nimport type { CodegenConfig } from '@graphql-codegen/cli';\nconst config: CodegenConfig = {\n  schema: 'http://localhost:4000/graphql',\n  documents: ['src/**/*.graphql'],\n  generates: {\n    'src/generated/graphql.ts': {\n      plugins: ['typescript', 'typescript-operations', 'typescript-urql'],\n      config: { withHooks: true }\n    }\n  }\n};\nexport default config;