Server-Side Rendering (SSR) & Hydration
A framework's ability to render HTML on a Node server (SSR) and then attach interactivity on the client (Hydration) is critical for SEO, performance, and Time-To-First-Byte (TTFB).
Currently, CellUI is a purely Client-Side Rendering (CSR) framework.
CellUI's Current Architecture
CellUI's native blinding speed is achieved because the view tag parses Tagged Template Literals directly into DocumentFragment objects using the browser's native document.createElement('template').
Because Node.js does not have a native document or DOM API, CellUI's core engine cannot currently run on a server.
The Boundary: SSR Stringification
To achieve SSR, CellUI would need an entirely parallel system: an "Isomorphic Parser".
When running in a Node environment, a CellUI component would need to return a heavily synthesized HTML string, instead of a DocumentFragment.
// Client-Side view (Current)
return view`<div>${signal}</div>`; // returns DOM Node
// Hypothetical Server-Side view
return serverView`<div>${signal}</div>`; // returns "<div><!--cellui-marker-->0</div>"The Complexity: Hydration
Generating the HTML string on the server is the easy part. The massive, unsolved complexity is Hydration.
Hydration is the process of taking the static HTML sent by the server, downloading the JavaScript bundle, and "waking up" the HTML so that buttons are clickable and signals react to changes—without recreating the DOM nodes.
In CellUI's architecture, we rely on identifying specific comments to know where to insert dynamic data. For a hypothetical CellUI SSR to work:
- The server would inject exact, deterministic
comments into the raw HTML string for every dynamic binding. - The client would run a completely different
hydrate(Component, rootNode)function. - Instead of parsing the template and building new DOM, the
hydratefunction would use aTreeWalkerto scan the existing HTML for those exact markers. - It would then bind the signals to the surrounding TextNodes or Elements exactly as the normal
viewparser does.
The Future
Building a seamless SSR and Hydration engine is an immense undertaking roughly equivalent to writing CellUI from scratch a second time.
Currently, if SEO is your primary concern, standard static-site generators (Astro, 11ty) or full-stack frameworks (Next.js, SvelteKit) remain the recommended tools. If TTFB and CSR speeds are your priority for Application dashboards and single-page apps (SPAs), CellUI's O(1) rendering is optimal.