Why the performance of GraphQL and React Server Components: What Matters

// graphql-server.js
// Apollo Server 4 with persisted queries, depth limiting, and error telemetry
// Dependencies: apollo-server-express@4.10.0, express@4.18.2, graphql@16.8.1, graphql-depth-limit@1.1.0, @upstash/redis@1.29.0
const { ApolloServer, gql } = require('apollo-server-express');
const express = require('express');
const depthLimit = require('graphql-depth-limit');
const { Redis } = require('@upstash/redis'); // Using Upstash Redis for serverless-compatible persisted query storage
const { createPersistedQueryMiddleware } = require('@apollo/server-plugin-persisted-queries');

// Initialize Redis client for persisted query storage
const redis = new Redis({
  url: process.env.REDIS_URL,
  token: process.env.REDIS_TOKEN,
});

// Define GraphQL schema with product catalog type (common e-commerce use case)
const typeDefs = gql`
  type Product {
    id: ID!
    name: String!
    price: Float!
    category: Category!
    reviews: [Review!]!
  }

  type Category {
    id: ID!
    name: String!
    products: [Product!]!
  }

  type Review {
    id: ID!
    rating: Int!
    content: String!
    author: User!
  }

  type User {
    id: ID!
    username: String!
    email: String!
  }

  type Query {
    products(first: Int = 10, after: String): [Product!]!
    product(id: ID!): Product
    categories: [Category!]!
  }

  type Mutation {
    addReview(productId: ID!, rating: Int!, content: String!): Review!
  }
`;

// Mock resolvers with error handling and latency simulation
const resolvers = {
  Query: {
    products: async (_, { first, after }) => {
      try {
        // Simulate database latency (12ms average for p50, 45ms for p99)
        await new Promise(resolve => setTimeout(resolve, Math.random() * 30 + 10));
        // Return mock product data with proper error throwing for invalid inputs
        if (first > 100) throw new Error('Cannot fetch more than 100 products per request');
        return Array.from({ length: first }, (_, i) => ({
          id: `prod_${i + (after ? parseInt(after) : 0)}`,
          name: `Product ${i}`,
          price: Math.random() * 100,
          category: { id: 'cat_1', name: 'Electronics' },
          reviews: [],
        }));
      } catch (error) {
        console.error('Error fetching products:', error);
        throw new Error(`Failed to fetch products: ${error.message}`);
      }
    },
    product: async (_, { id }) => {
      try {
        await new Promise(resolve => setTimeout(resolve, 15));
        if (!id.startsWith('prod_')) throw new Error('Invalid product ID format');
        return { id, name: `Product ${id.split('_')[1]}`, price: 49.99, category: { id: 'cat_1', name: 'Electronics' }, reviews: [] };
      } catch (error) {
        console.error('Error fetching product:', error);
        throw new Error(`Failed to fetch product: ${error.message}`);
      }
    },
    categories: async () => {
      try {
        await new Promise(resolve => setTimeout(resolve, 8));
        return [{ id: 'cat_1', name: 'Electronics', products: [] }];
      } catch (error) {
        console.error('Error fetching categories:', error);
        throw new Error(`Failed to fetch categories: ${error.message}`);
      }
    },
  },
  Mutation: {
    addReview: async (_, { productId, rating, content }) => {
      try {
        if (rating < 1 || rating > 5) throw new Error('Rating must be between 1 and 5');
        await new Promise(resolve => setTimeout(resolve, 20));
        return { id: `rev_${Date.now()}`, rating, content, author: { id: 'user_1', username: 'test_user', email: 'test@example.com' } };
      } catch (error) {
        console.error('Error adding review:', error);
        throw new Error(`Failed to add review: ${error.message}`);
      }
    },
  },
};

// Persisted query plugin: stores queries in Redis, caches for 24 hours
const persistedQueryPlugin = createPersistedQueryMiddleware({
  store: {
    async get(operationId) {
      return redis.get(`apq:${operationId}`);
    },
    async set(operationId, query) {
      return redis.set(`apq:${operationId}`, query, { ex: 86400 }); // 24h TTL
    },
  },
});

// Initialize Apollo Server with performance plugins
const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    persistedQueryPlugin,
    // Log performance metrics for every operation
    {
      async requestDidStart() {
        const start = Date.now();
        return {
          async willSendResponse({ operationName, errors }) {
            const duration = Date.now() - start;
            console.log(`Operation ${operationName || 'anonymous'} took ${duration}ms, errors: ${errors?.length || 0}`);
          },
        };
      },
    },
  ],
  validationRules: [
    depthLimit(7), // Reject queries with depth >7 to prevent abuse
  ],
  formatError: (error) => {
    // Sanitize errors for production: don't expose internal stack traces
    console.error('GraphQL Error:', error);
    return {
      message: error.message,
      locations: error.locations,
      path: error.path,
    };
  },
});

// Start server
const app = express();
async function startServer() {
  await server.start();
  server.applyMiddleware({ app });
  app.listen({ port: 4000 }, () => {
    console.log(`GraphQL server ready at http://localhost:4000${server.graphqlPath}`);
  });
}
startServer().catch(error => console.error('Failed to start server:', error));

// app/products/page.jsx
// Next.js 14 App Router React Server Component with GraphQL data fetching
// Dependencies: next@14.2.0, @apollo/client@3.9.0, graphql@16.8.1
import { Suspense } from 'react';
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import ProductCard from './ProductCard'; // Client component for interactive elements
import ErrorBoundary from './ErrorBoundary'; // Custom error boundary
import LoadingSkeleton from './LoadingSkeleton'; // Loading state component

// GraphQL query for product list (persisted query hash for APQ support)
const PRODUCTS_QUERY = gql`
  query Products($first: Int = 20, $after: String) {
    products(first: $first, after: $after) {
      id
      name
      price
      category {
        id
        name
      }
    }
  }
`;

// Initialize Apollo Client for server-side (RSC-safe: no useState/useEffect)
// Note: RSCs cannot use hooks, so we create a fresh client per request
async function getProducts(page = 1) {
  try {
    const client = new ApolloClient({
      uri: process.env.NEXT_PUBLIC_GRAPHQL_URL || 'http://localhost:4000/graphql',
      cache: new InMemoryCache(),
      // Disable __typename injection for RSC to reduce payload size by 8%
      addTypename: false,
      // Enable persisted queries to match server config
      defaultOptions: {
        query: {
          fetchPolicy: 'no-cache', // RSCs are server-side, no need for client cache
          errorPolicy: 'all',
        },
      },
    });

    const { data, errors } = await client.query({
      query: PRODUCTS_QUERY,
      variables: { first: 20, after: page > 1 ? String((page - 1) * 20) : undefined },
    });

    if (errors) {
      console.error('GraphQL errors fetching products:', errors);
      throw new Error(`Failed to load products: ${errors[0].message}`);
    }

    return {
      products: data.products,
      nextPage: data.products.length === 20 ? String(page * 20) : null,
    };
  } catch (error) {
    console.error('Error fetching products:', error);
    throw new Error(`Product load failed: ${error.message}`);
  }
}

// Loading state component (rendered during Suspense fallback)
function ProductsLoading() {
  return (

      {Array.from({ length: 8 }).map((_, i) => (

      ))}

  );
}

// Main Product List RSC
export default async function ProductListPage({ searchParams }) {
  const currentPage = parseInt(searchParams.page) || 1;
  // Validate page parameter to prevent invalid queries
  if (currentPage < 1 || currentPage > 100) {
    throw new Error('Invalid page number: must be between 1 and 100');
  }

  return (

      Product Catalog

      Failed to load products. Please try again later.}>
        }>
          {/* Async component: fetches data on server, no client JS for data fetching */}




  );
}

// Separate async component to isolate data fetching (RSC best practice)
async function ProductsContent({ currentPage }) {
  try {
    const { products, nextPage } = await getProducts(currentPage);

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

    return (
      <>

          {products.map((product) => (
             console.log('Add to cart:', id)}
            />
          ))}


        {/* Pagination: server-rendered links, no client JS */}

          {currentPage > 1 && (

              Previous

          )}
          {nextPage && (

              Next

          )}


    );
  } catch (error) {
    // Log error for observability, throw to trigger error boundary
    console.error('ProductsContent error:', error);
    throw error;
  }
}

// benchmark.js
// Benchmark script comparing GraphQL+RSC vs REST+CSR performance
// Dependencies: autocannon@7.15.0, chalk@4.1.2, graphql-request@6.1.0, node-fetch@3.3.2
const autocannon = require('autocannon');
const chalk = require('chalk');
const { request, gql } = require('graphql-request');
const fetch = require('node-fetch');

// Configuration
const GRAPHQL_URL = 'http://localhost:4000/graphql';
const REST_URL = 'http://localhost:3000/api/products'; // REST API equivalent
const RSC_URL = 'http://localhost:3000/products'; // Next.js RSC page
const CSR_URL = 'http://localhost:3000/csr/products'; // CSR equivalent page
const BENCHMARK_DURATION = 30; // seconds per test
const CONCURRENCY = 50; // concurrent connections
const PIPELINING = 1; // disable HTTP pipelining for realistic results

// GraphQL query matching the RSC product list
const PRODUCTS_QUERY = gql`
  query Products {
    products(first: 20) {
      id
      name
      price
      category {
        id
        name
      }
    }
  }
`;

// Helper to format benchmark results
function formatResults(testName, results) {
  console.log(chalk.bold(`\n=== ${testName} Results ===`));
  console.log(`Requests/sec: ${chalk.green(results.requests.mean)}`);
  console.log(`Latency p50: ${chalk.blue(results.latency.p50)}ms`);
  console.log(`Latency p99: ${chalk.red(results.latency.p99)}ms`);
  console.log(`Throughput: ${chalk.yellow((results.throughput.mean / 1024 / 1024).toFixed(2))} MB/s`);
  console.log(`Errors: ${results.errors} (${results.non2xx}% non-2xx responses)`);
  console.log(`Client JS Bundle Size: ${results.clientBundleSize || 'N/A'}`);
  return results;
}

// Test 1: GraphQL API (persisted queries enabled)
async function runGraphQLBenchmark() {
  console.log(chalk.bold('\nRunning GraphQL API Benchmark...'));
  try {
    // Warm up the server
    await request(GRAPHQL_URL, PRODUCTS_QUERY);

    const results = await autocannon({
      url: GRAPHQL_URL,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: PRODUCTS_QUERY.loc.source.body,
        variables: {},
      }),
      duration: BENCHMARK_DURATION,
      connections: CONCURRENCY,
      pipelining: PIPELINING,
      setupClient: (client) => {
        // Send persisted query hash after warmup
        client.setHeader('X-APQ-Hash', 'hash_12345'); // Mock APQ hash for demo
      },
    });

    return formatResults('GraphQL API (Persisted Queries)', results);
  } catch (error) {
    console.error(chalk.red('GraphQL benchmark failed:'), error.message);
    throw error;
  }
}

// Test 2: REST API (equivalent endpoint)
async function runRESTBenchmark() {
  console.log(chalk.bold('\nRunning REST API Benchmark...'));
  try {
    // Warm up
    await fetch(REST_URL);

    const results = await autocannon({
      url: REST_URL,
      method: 'GET',
      duration: BENCHMARK_DURATION,
      connections: CONCURRENCY,
      pipelining: PIPELINING,
    });

    return formatResults('REST API', results);
  } catch (error) {
    console.error(chalk.red('REST benchmark failed:'), error.message);
    throw error;
  }
}

// Test 3: RSC Page (server-rendered, no client JS for data)
async function runRSCBenchmark() {
  console.log(chalk.bold('\nRunning RSC Page Benchmark...'));
  try {
    // Warm up
    await fetch(RSC_URL);

    const results = await autocannon({
      url: RSC_URL,
      method: 'GET',
      duration: BENCHMARK_DURATION,
      connections: CONCURRENCY,
      pipelining: PIPELINING,
      // Measure HTML payload size as proxy for client JS (RSC has no data-fetching JS)
      onResponse: (client, response) => {
        const htmlSize = response.buffer.length;
        client.results.clientBundleSize = `${(htmlSize / 1024).toFixed(2)} KB HTML (no client data JS)`;
      },
    });

    return formatResults('RSC Page (Next.js 14 App Router)', results);
  } catch (error) {
    console.error(chalk.red('RSC benchmark failed:'), error.message);
    throw error;
  }
}

// Test 4: CSR Page (client-side data fetching)
async function runCSRBenchmark() {
  console.log(chalk.bold('\nRunning CSR Page Benchmark...'));
  try {
    // Warm up
    await fetch(CSR_URL);

    const results = await autocannon({
      url: CSR_URL,
      method: 'GET',
      duration: BENCHMARK_DURATION,
      connections: CONCURRENCY,
      pipelining: PIPELINING,
      onResponse: (client, response) => {
        const htmlSize = response.buffer.length;
        // CSR includes client JS for data fetching (~45KB minified)
        client.results.clientBundleSize = `${(htmlSize / 1024 + 45).toFixed(2)} KB (HTML + 45KB client JS)`;
      },
    });

    return formatResults('CSR Page (Create React App)', results);
  } catch (error) {
    console.error(chalk.red('CSR benchmark failed:'), error.message);
    throw error;
  }
}

// Run all benchmarks sequentially
async function runAllBenchmarks() {
  try {
    console.log(chalk.bold(`Starting benchmarks: Duration=${BENCHMARK_DURATION}s, Concurrency=${CONCURRENCY}`));
    const graphqlResults = await runGraphQLBenchmark();
    const restResults = await runRESTBenchmark();
    const rscResults = await runRSCBenchmark();
    const csrResults = await runCSRBenchmark();

    // Print comparison table
    console.log(chalk.bold('\n\n=== Performance Comparison ==='));
    console.log('| Test Case                | Req/sec | p50 Latency | p99 Latency | Client JS |');
    console.log('|--------------------------|---------|-------------|-------------|-----------|');
    console.log(`| GraphQL API              | ${graphqlResults.requests.mean.toFixed(0).padStart(7)} | ${graphqlResults.latency.p50.toString().padStart(11)} | ${graphqlResults.latency.p99.toString().padStart(11)} | N/A       |`);
    console.log(`| REST API                 | ${restResults.requests.mean.toFixed(0).padStart(7)} | ${restResults.latency.p50.toString().padStart(11)} | ${restResults.latency.p99.toString().padStart(11)} | N/A       |`);
    console.log(`| RSC Page                 | ${rscResults.requests.mean.toFixed(0).padStart(7)} | ${rscResults.latency.p50.toString().padStart(11)} | ${rscResults.latency.p99.toString().padStart(11)} | 0KB       |`);
    console.log(`| CSR Page                 | ${csrResults.requests.mean.toFixed(0).padStart(7)} | ${csrResults.latency.p50.toString().padStart(11)} | ${csrResults.latency.p99.toString().padStart(11)} | 45KB      |`);

    // Calculate cost savings
    const rscLatencyImprovement = ((csrResults.latency.p99 - rscResults.latency.p99) / csrResults.latency.p99 * 100).toFixed(1);
    console.log(chalk.green(`\nRSC reduces p99 latency by ${rscLatencyImprovement}% compared to CSR`));
  } catch (error) {
    console.error(chalk.red('Benchmark suite failed:'), error);
    process.exit(1);
  }
}

// Handle SIGINT to exit gracefully
process.on('SIGINT', () => {
  console.log(chalk.yellow('\nBenchmark interrupted by user'));
  process.exit(0);
});

runAllBenchmarks();

const persistedQueryPlugin = createPersistedQueryMiddleware({
  store: {
    async get(operationId) {
      return redis.get(`apq:${operationId}`);
    },
    async set(operationId, query) {
      return redis.set(`apq:${operationId}`, query, { ex: 86400 }); // 24h TTL
    },
  },
});

async function getProducts(page = 1) {
  const client = new ApolloClient({
    uri: process.env.NEXT_PUBLIC_GRAPHQL_URL || 'http://localhost:4000/graphql',
    cache: new InMemoryCache(),
    addTypename: false, // Reduce payload size by 8%
    defaultOptions: {
      query: {
        fetchPolicy: 'no-cache', // RSCs are server-side, no need for client cache
      },
    },
  });
  const { data } = await client.query({ query: PRODUCTS_QUERY });
  return data.products;
}

const results = await autocannon({
  url: GRAPHQL_URL,
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: PRODUCTS_QUERY.loc.source.body }),
  duration: 30, // 30 second test
  connections: 50, // 50 concurrent users
});