@flightdev/ui-solid
v1.1.0
Published
Solid.js SSR adapter for Flight Framework
Readme
@flightdev/ui-solid
Solid.js SSR adapter for Flight Framework. Provides server-side rendering with streaming and hydration support.
Table of Contents
Installation
npm install @flightdev/ui @flightdev/ui-solidPeer dependencies:
npm install solid-jsQuick Start
import { defineUI } from '@flightdev/ui';
import { solid } from '@flightdev/ui-solid';
const ui = defineUI(solid());
const result = await ui.adapter.renderToString({
component: App,
props: { count: 0 },
});
console.log(result.html);SSR Options
Configure the Solid adapter with options:
import { solid } from '@flightdev/ui-solid';
const adapter = solid({
streaming: true,
timeout: 10000,
});Available Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| streaming | boolean | false | Enable streaming SSR |
| timeout | number | - | Render timeout in milliseconds |
Streaming SSR
Solid.js supports streaming SSR for improved time-to-first-byte:
import { solid } from '@flightdev/ui-solid';
const adapter = solid({ streaming: true });
const { stream, done, abort } = adapter.renderToStream(
{ component: App, props: { data } },
{ url: request.url },
{
onShellReady: () => {
response.writeHead(200, {
'Content-Type': 'text/html',
});
},
onAllReady: () => {
console.log('Page fully rendered');
},
}
);
const reader = stream.getReader();
while (true) {
const { done: readerDone, value } = await reader.read();
if (readerDone) break;
response.write(value);
}
response.end();Hydration
Generate hydration scripts for client-side interactivity:
const result = await adapter.renderToString({
component: App,
props: { data },
});
const hydrationScript = adapter.getHydrationScript(result);
const html = `
<!DOCTYPE html>
<html>
<body>
<div id="app">${result.html}</div>
${hydrationScript}
</body>
</html>
`;Client Entry
import { hydrate, render } from 'solid-js/web';
import App from './App';
const container = document.getElementById('app');
const props = window.__FLIGHT_DATA__.props;
if (container.innerHTML.trim()) {
hydrate(() => App(props), container);
} else {
render(() => App(props), container);
}API Reference
solid(options?)
Create a Solid adapter instance.
function solid(options?: SolidAdapterOptions): SolidAdapter;SolidAdapter
| Method | Description |
|--------|-------------|
| renderToString(component, context?) | Render to HTML string |
| renderToStream(component, context?, options?) | Render to readable stream |
| getHydrationScript(result) | Generate hydration script |
| getClientEntry() | Get client entry code |
Capabilities
| Capability | Supported | |------------|-----------| | Streaming | Yes | | Partial Hydration | Yes | | Islands | Yes | | Resumable | No | | SSG | Yes | | CSR | Yes | | Server Components | No |
License
MIT