Server and client

The boundary

A // @runsOn server component may fetch data with await data(...) and render client components. Crossing the boundary requires an explicit marker at the JSX call site:

// @runsOn server
import { data } from '@marisjs/runtime';
import { Stats } from '../islands/Stats.tsx';

type Props = {};

export function Dashboard(props: Props) {
  const products = await data(async () => {
    const res = await fetch('https://api.example.com/products');
    return res.json();
  });

  return (
    <div>
      <h1>Dashboard</h1>
      <Stats items={products} client:hydrate />
    </div>
  );
}

Everything left of the marker is static HTML produced at build time. Everything right of it is a compiled island module, hydrated in place when the page loads.

What hydration means here

• Only components marked client:hydrate ship JavaScript to the browser.
• The page's compiled module imports exactly the islands it uses - nothing else.
• Each island mounts onto its own element and manages its own signals.
• A failed island module does not take down the rest of the page's islands.