Efficient Batching Requests

Imagine your app needs to fetch several pieces of data from your backend. Without batching, each piece of data would require its own separate network request.

Request batching is a technique where multiple individual requests are combined into a single, larger request before being sent to the server. This can significantly improve performance.

Sending many small requests can be inefficient. Each request has overhead:

• Network latency: Time delay for each round trip.
• TCP Handshakes: Setting up a connection for each request.
• Server Load: Processing many small requests individually.

These add up, making your app feel slower.

One of tRPC's coolest features is its automatic request batching. When your client code makes multiple tRPC calls in quick succession, tRPC intelligently bundles them into one single HTTP request.

You don't need to write any special code for this; it just works out of the box!

tRPC batches requests that occur within the same "event loop tick" or a very short timeframe. This means if you call two different tRPC queries right after each other, they'll likely be batched.

For example, if you have two useQuery calls in a React component that render simultaneously, tRPC will batch them.

Let's look at how multiple client calls become one network request. Imagine your React component needs two different user details:

// Client-side React/Next.js example
import { trpc } from './utils/trpc';

function UserProfile() {
  const { data: user1 } = trpc.user.getById.useQuery({ id: '1' });
  const { data: user2 } = trpc.user.getById.useQuery({ id: '2' });

  // ... render user data
}

Even though you call useQuery twice, tRPC will send these as a single batched request to your server.

If you open your browser's developer tools and go to the "Network" tab, you'll see something interesting:

• Instead of two separate requests for user.getById?id=1 and user.getById?id=2, you'll see just one request.
• This single request will typically go to a special batching endpoint, often named something like /api/trpc/user.getById,user.getById.
• The response will contain the results for both queries.

Automatic request batching provides several advantages:

• Reduced Latency: Fewer round trips mean faster data retrieval.
• Lower Overhead: Less connection setup and teardown.
• Efficient Server Usage: Servers can process multiple related tasks more efficiently.
• Simpler Code: You don't manage batching manually; tRPC handles it.

When tRPC receives a batched request, it:

1. Parses the single incoming HTTP request.
2. Identifies all the individual procedures included in the batch.
3. Executes each procedure, often in parallel if they are independent.
4. Combines the results from all procedures into a single response.

This ensures the server also benefits from the optimized request.

While tRPC's automatic batching is excellent, there might be rare cases where you want to disable or configure it. For example, if you have very long-running queries that you prefer to execute separately.

You can configure batching options when setting up your tRPC client, but for most applications, the default behavior is optimal.

Which of the following statements about tRPC's automatic request batching are TRUE?

Great job! In this lesson, we explored tRPC's automatic request batching.

• We learned how tRPC combines multiple client queries into a single network request.
• This reduces network overhead, latency, and improves overall application performance.
• Batching happens automatically for requests made within the same event loop tick.

This powerful feature simplifies your code and makes your applications faster without extra effort!