@lazarv/react-server/remote

Loads a remote React component from another @lazarv/react-server deployment and renders it server-side, hydrating any client components via an import map.

const RemoteComponent: React.FC<{
    src: string;
    ttl?: number;
    defer?: boolean;
    request?: RequestInit;
    onError?: (error: Error) => void;
}>;

Loads a remote component from the given URL. The component is fetched and rendered on the server side and if contains any client components, they are hydrated on the client side. For client components to work properly, you might need to use an import map. If the component is streamed, use the defer option to re-fetch the component after the initial render on the client side.

Parameters

• src — The URL of the remote component
• ttl — The time-to-live for the component, the remote component is cached for the given time
• defer — If true, the component is re-fetched after the initial render on the client side
• request — The request options for the fetch request
• onError — The error handler for the fetch request

import RemoteComponent from '@lazarv/react-server/remote';

export default function App() {
  return (
    <>
      <h1>App</h1>
      <RemoteComponent src="https://example.com/remote-component" />
   </>
 );
}