React Islands#

Only where a rich UI is needed, you can mount a client React component as an "island" (an escape hatch).

<?php
use Polidog\Relayer\React\Island;

return fn () => (
    <section>
        <h1>Dashboard</h1>
        {Island::mount('Chart', ['points' => $data])}
    </section>
);

The framework emits a placeholder like the following.

<div data-react-island="Chart" data-react-props='…'></div>

You register the component in a client-side JS bundle (build it yourself with vite / esbuild or similar).

import Chart from './islands/Chart';

window.relayerIslands.register('Chart', (el, props) => {
    createRoot(el).render(<Chart {...props} />);
});

The loader is added to the document only once.

$document->addHeadHtml(Island::loaderScript($nonce));
$document->addHeadHtml('<script type="module" src="/islands.js"></script>');

• The loader also finds and mounts islands inserted later by defer, via a MutationObserver. register and the DOM can come in either order.
• There is no SSR (islands render on the client only).
• Communication between an island and the server is done with a fetch to your own route.php.
• Preparing the bundle is the user's responsibility. The framework does not add a Node build.

This documentation site does not use islands and is composed of server-rendering only (search too is completed on the server side via route.php / pages).