Performance & Batching

Goal: Optimize for high-frequency updates using batching and throttling.

Client-side batching

Group multiple RPC calls into a single WebSocket frame:

<script>
  import { batch } from 'svelte-realtime/client';
  import { createBoard, addColumn, addCard } from '$live/boards';

  const [board, column, card] = await batch(() => [
    createBoard('My Board'),
    addColumn('To Do'),
    addCard('First task')
  ]);
</script>

Three calls, one frame, one round trip.

Server-side batching

Publish multiple events atomically:

export const resetBoard = live(async (ctx, boardId) => {
  ctx.batch([
    { topic: `board:${boardId}`, event: 'set', data: [] },
    { topic: `board:${boardId}:presence`, event: 'set', data: [] }
  ]);
});

Throttle high-frequency publishes

For mouse movement, scroll tracking, or drag operations:

export const move = live((ctx, x, y) => {
  ctx.throttle('positions', 'update', {
    key: ctx.user.id, x, y
  }, 50); // 20 updates/sec max
});

Performance guidelines

• Use ctx.throttle() for high-frequency server publishes (cursors, positions)
• Use client-side batch() when making multiple RPCs together
• Use ctx.batch() when publishing multiple events from one handler
• Use merge: 'set' for single values - cheaper than crud for simple state