Request Batching System for Network Optimization

[0xhssn]

Hello SWR team,

I'd like to propose adding a request batching capability to SWR that would significantly improve performance for data-intensive applications. After using SWR extensively, I've noticed that components rendering in quick succession often trigger multiple network requests that could be consolidated.

The Problem

When multiple components mount nearly simultaneously (like in dashboards or lists), they often request data independently, creating a "request waterfall" that:

• Increases network overhead with many small requests
• Creates unnecessary connection setup/teardown cycles
• Reduces perceived performance for users

Proposed Solution

I'd like to contribute a request batching system that:

1. Collects similar requests within a configurable time window (e.g., 50ms)
2. Groups them into a single network request
3. Distributes responses back to individual hooks
4. Preserves SWR's existing caching and revalidation behaviors

This would integrate with SWR's middleware system, exposing:

• A useSWRBatch hook for direct use
• A createBatchMiddleware factory for global configuration

Example Usage

// Global Configuration
import { SWRConfig } from 'swr';
import { createBatchMiddleware } from 'swr';

function App() {
  return (
    <SWRConfig
      value={{
        use: [createBatchMiddleware({
          window: 50,
          endpoint: '/api/batch',
          maxSize: 20
        })],
      }}
    >
      <Component />
    </SWRConfig>
  );
}

// Component Usage
import { useSWR, useSWRBatch } from 'swr';

function Dashboard() {
  // Option 1: Using regular useSWR with middleware
  const { data: stats } = useSWR('/api/stats', fetcher, {
    batch: { priority: 'high' }
  });

  // Option 2: Using dedicated hook
  const { data: user } = useSWRBatch('/api/user', fetcher, {
    batch: { priority: 'critical' }
  });
  
  return (/* ... */);
}

Technical Approach

The implementation would follow SWR's patterns:

• New types in _internal/types.ts for batch options
• Core utilities in _internal/utils/batch.ts
• Public API in a new batch/index.ts file
• Full TypeScript support and comprehensive testing

Benefits

• Reduced network overhead and server load
• Improved rendering performance for data-heavy UIs
• Configurable to match different application needs
• Backward compatible with existing SWR code

I've already sketched the implementation and would be happy to share more details or create a proof-of-concept PR if there's interest in this feature.

What do you think? Would this be a valuable addition to SWR?