One file, two ways: Fitz brings SSR and WASM from a single component
A single .fitzv file just compiled into two different runtimes—server-rendered HTML over WebSocket and a WebAssembly binary running entirely in the browser. No rewrites, no build steps, and no JavaScript on your part.
Same source, two deployments
The trick is in the toolchain. A Fitz component bundles state, events, markup, and scoped style into one artifact. When you target SSR, the server keeps the state and streams only the HTML diffs to the browser. Switch to WASM and the same component compiles to WebAssembly, shipping the entire interactive widget with no server round-trips. The counter example shows it in action: one file, two buttons—one for SSR, one for WASM—no code duplication.
How the plumbing works
Under the hood, the SSR path starts with a regular HTTP route that renders the initial HTML. A companion WebSocket route receives DOM events, dispatches them to the server-side component, and pushes minimal DOM patches back to the client. There’s no client-side JavaScript to write, no API endpoints to define, and the server’s state can be shared or persisted. The WASM path flips the model: the component becomes a self-contained module that hydrates in the browser, handling events locally and rendering without ever contacting the server.
What it means for teams
For multi-user, database-backed interfaces, SSR keeps state centralized and secure. For offline widgets or latency-sensitive interactions, WASM shifts the workload to the client. The same developer experience—just one language, one file—reduces context switching and eliminates the classic front-end build dance.
Why it matters
Fitz bridges a long-standing gap: the ability to ship real-time UIs without maintaining two codebases or forcing users to run JavaScript they didn’t write. Teams can now prototype in one environment and deploy to two runtimes without rewriting logic, a tangible productivity boost for full-stack teams balancing SSR and client-side performance.
Source: DEV Community. AI-assisted editorial synthesis — TechnoExpress.