#369

FR: Allow SSR for @json-render/react

OpenItalyPaleAleopened 1mo ago

@json-render/react is optimized for use on the client-side. It would be great if it could be used server-side too, for full SSR in a React or Next.js app.

Activity

1
Justify-social1mo ago

+1, and we'd like to help build this.

We render public creator pages from json-render specs (composed deterministically on the server, no model at render time). They are SEO pages, so we need full HTML in the first response and as little client JS as possible. Today @json-render/react has to sit behind 'use client' because the renderer uses context and hooks, which React's react-server build does not export. For our pages that means every component in the registry hydrates, roughly 60 to 125 KB gzip of extra client JS per page (the renderer plus zod), for blocks that are static.

A possible shape, happy to adjust to your preferences:

  • A server entry, e.g. @json-render/react/server, exporting a hook-free renderSpec(spec, registry) (or <ServerRenderer />) that walks the element tree and returns React nodes, usable from a Server Component.
  • Static props only on that path: no $state, $cond or on handlers. If a spec uses them, the server renderer fails loudly rather than silently degrading.
  • Registry entries may be Client Components, so interactive islands still hydrate while everything else ships no JS.
  • Per-element props validated against catalog.data.components[type].props before rendering, with failing elements dropped and reported through a callback, so one bad element never takes the page down.
  • The existing client Renderer is unchanged.

If this direction works for you, we're happy to open a PR with tests. Would you want it in @json-render/react or as a separate package?