Live Components

Live Components are a powerful feature of @lazarv/react-server that allows you to create interactive components that can update in real-time without requiring a full page reload. This is particularly useful for applications that require dynamic content updates, such as chat applications, dashboards, or collaborative tools.

Note: Live Components are designed to work seamlessly with @lazarv/react-server, and they leverage the power of React Server Components to provide a smooth and efficient user experience. However, they are still an experimental feature, and you should use them with caution in production applications.

Live Components provide several benefits:

• Real-time updates: Live Components can update their state and re-render in response to changes in data, providing a seamless user experience.
• Reduced latency: By avoiding full page reloads, Live Components can deliver updates more quickly, improving the responsiveness of your application.
• Improved user experience: Users can interact with the application without interruptions, leading to a smoother and more engaging experience.
• Remote Components: Live Components can be used in conjunction with Remote Components, allowing you to load and render components from remote sources while still benefiting from real-time updates.

To implement Live Components in your application, you can use the "use live" directive in your component. This directive enables the component to be live and allows it to update in real-time. You need to implement your component using an async generator function that yields the component's updates as React Server Components. Here's an example of how to create a simple Live Component:

"use live";

export default async function* LiveComponent() {
  while (true) {
    yield <div>Current time: {new Date().toLocaleTimeString()}</div>;
    await new Promise((resolve) => setTimeout(resolve, 1000));
  }
}

The runtime will create a special outlet for this component, allowing it to update in real-time. The component will re-render every second, displaying the current time without requiring a full page reload or any user interaction.

You can use Live Components in your application by importing them and rendering them like any other React component:

import LiveComponent from "./LiveComponent";

export default function Home() {
  return (
    <div>
      <h1>Live Component Example</h1>
      <LiveComponent />
    </div>
  );
}

This will render the Live Component on the page, and it will update every second to show the current time.

You can also use Live Components in combination with other features of @lazarv/react-server, such as server functions and client components, to create rich, interactive applications that respond to user input and data changes in real-time.

Each Live Component instance is runs in it's own context, so you can have multiple instances of the same Live Component on the same page, each with its own state and updates. This allows you to create complex, interactive UIs that can handle multiple live updates simultaneously.

Note: stay tuned for updates on the Live Components feature, "use live: broadcast" is planned to arrive very soon, which will allow you to broadcast updates to multiple Live Components at once, making it easier to manage state and updates across your application.

Live Components support three transports out of the box. Pick one in react-server.config.{mjs,json}:

export default {
  live: {
    transport: "auto", // "auto" | "socketio" | "sse" | "ws"
  },
};

Per-component override: any module can pin its own transport with the directive form "use live; transport=sse". The build collects every transport name actually referenced and only loads those at runtime.

"use live; transport=sse";

export default async function* StockTicker() {
  for await (const tick of subscribeToTicks()) {
    yield <Tick {...tick} />;
  }
}

If your application has no "use live" modules, the runtime ships with zero transport code:

• The build doesn't emit a live manifest, so the production server never imports socket.io (or ws, or the SSE adapter).
• The browser never imports socket.io-client — the per-transport client adapter is dynamically imported only when an outlet on the current page is live.
• The HTML preconnect link (<link rel="preconnect" id="live-io">) is omitted entirely from pages that have no live outlets.

When a page does use live components, only the transports that page actually needs are loaded — adding "use live; transport=sse" to a single component never pulls socket.io into the bundle.