Netron in the browser

Note about server-side Netron: the server lives inside Titan itself at @omnitron-dev/titan/netron — including all four transports (HTTP / WebSocket / TCP / Unix). You don't install a separate package for the server. This section covers the browser-side clients only.

Two packages cover the browser side of Netron RPC:

For React apps you install both. For non-React apps install just netron-browser:

# React apps:
pnpm add @omnitron-dev/netron-browser @omnitron-dev/netron-react

# Vue / Svelte / Solid / Angular / Lit / vanilla JS:
pnpm add @omnitron-dev/netron-browser

How they relate

flowchart LR
  App[Your component]
  Hook[netron-react hook<br/>useQuery / useService]
  Cache[QueryCache]
  Client[netron-browser<br/>NetronClient]
  MW[Middleware pipeline]
  Wire[(HTTP / WS)]
  Server[Titan @Service / @Public]

  App --> Hook --> Cache --> Client --> MW --> Wire --> Server

netron-browser is the foundation and works in any JavaScript environment. netron-react is an optional layer that adds React glue: cache, suspense, providers, devtools, multi-backend hooks. For Vue / Svelte / Solid / Angular / Lit apps, wrap netron-browser calls in your framework's reactivity primitives directly.

Deep dives

Topic-focused references:

• Transports — choosing an HTTP or WebSocket endpoint, React selection and reconnect behaviour

• Middleware — three-stage pipeline, built-in middleware, custom middleware

• Caching — LRU cache, stale-while-revalidate, tag invalidation

• Auth manager — token rotation, cross-tab sync, inactivity timeout

• Multi-backend — MultiBackendProvider, routing, per-backend hooks

• Error handling — typed errors, retry classification, circuit breaker

• Testing — TestNetronProvider, integration patterns

• SSR — dehydration / hydration

Quick start — single backend

import { NetronReactClient, NetronProvider, useService }
  from '@omnitron-dev/netron-react';

interface UserService {
  getUser(id: string): Promise<User>;
}

const client = new NetronReactClient({
  url:       'https://api.example.com',
  transport: 'http',
});

function App() {
  return (
    <NetronProvider client={client}>
      <UserCard userId="u_42" />
    </NetronProvider>
  );
}

function UserCard({ userId }: { userId: string }) {
  const users = useService<UserService>('users');
  const { data, isLoading } = users.getUser.useQuery([userId]);
  return isLoading ? <Skeleton /> : <div>{data.email}</div>;
}

Quick start — multi-backend

import { createMultiBackendClient }
  from '@omnitron-dev/netron-browser';
import { MultiBackendProvider, useBackendService }
  from '@omnitron-dev/netron-react';

const client = createMultiBackendClient({
  baseUrl: 'https://api.example.com',
  backends: {
    auth:    { path: '/auth',    transport: 'http' },
    media:   { path: '/media',   transport: 'http' },
    streams: { path: '/streams', transport: 'websocket' },
  },
  routing: {
    patterns: [
      { pattern: 'users.',   backend: 'auth' },
      { pattern: 'objects.', backend: 'media' },
      { pattern: 'events.',  backend: 'streams' },
    ],
  },
});

<MultiBackendProvider client={client}>
  <Outlet />
</MultiBackendProvider>

function Component() {
  const users = useBackendService<UserService>('auth', 'users');
  const { data } = users.getUser.useQuery([id]);
}

See also

• Prism / Netron integration — re-export helpers via Prism

• Titan / Netron — server side

• Architecture — full cross-stack picture