With the arrival of Out Of Order HTML it's only right that we get a declarative component model that takes advantage of it. What should a component model for this look like? It turns out this has already been thought through by a little project called React in the shape of Suspense.

Suspense declares what can be delayed, and what to show when it's pending. Turns out that is exactly what we need to wrangle the new processing instructions and template for behavior.

Using the same mechanisms, we can also introduce an ErrorBoundary capable of "unwinding" the streamed UI if an error occurs, how cool is that?

So what does this look like?

<ErrorBoundary fallback={<p>Oops, something went wrong</p>}>
  <Suspense fallback={<p>Loading...</p>}>
    <AsyncComponent />
  </Suspense>
</ErrorBoundary>

What about client interactivity?

This is a completely server based JSX runtime. No hydration, no data payloads, no large bundles. So how do we handle interactivity? With native events and use client directives!

<button
  onclick={(event) => {
    "use client";
    event.preventDefault();
    const self = event.currentTarget as HTMLButtonElement;
    const span = self.querySelector("span") as HTMLSpanElement;
    const count = parseInt(span.textContent);
    span.textContent = (count + 1).toString();
  }}
>
    Count <span>0</span>
</button>

Try it yourself

Clone the example:

pnpm dlx giget@latest gh:jacob-ebey/srv-jsx/skills/srv-jsx/assets/vite-example

Run the dev server:

pnpm dev

Install the agent skill if that's your cup of tea:

pnpm dlx skills@latest add jacob-ebey/srv-jsx