Skip to main content

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:

PackageRoleFramework
@omnitron-dev/netron-browserTransport layer — HTTP, WebSocket, middleware, auth, multi-backendFramework-agnostic — vanilla JS, Vue, Svelte, Solid, Angular, Lit, React, Web Workers, Electron
@omnitron-dev/netron-reactReact-specific hooks, providers, cache, devtoolsReact-only

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​

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 — HTTP, WebSocket, auto-mode, reconnect tuning
  • 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 — MockProvider, 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: 'auto',
});

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​