@flightdev/ui-qwik

Qwik SSR adapter for Flight Framework. Provides server-side rendering with resumable hydration support.

Table of Contents

• Installation
• Quick Start
• Resumable Hydration
• SSR Options
• API Reference
• License

Installation

npm install @flightdev/ui @flightdev/ui-qwik

Peer dependencies:

npm install @builder.io/qwik

Quick Start

import { defineUI } from '@flightdev/ui';
import { qwik } from '@flightdev/ui-qwik';

const ui = defineUI(qwik());

const result = await ui.adapter.renderToString({
    component: App,
    props: { items: [] },
});

console.log(result.html);

Resumable Hydration

Qwik's unique architecture serializes component state directly into HTML, enabling zero-JavaScript-until-interaction:

import { qwik } from '@flightdev/ui-qwik';

const adapter = qwik();

const result = await adapter.renderToString({
    component: App,
    props: { data },
});

// Qwik HTML contains serialized state
// No JavaScript is needed until user interaction
console.log(result.html);

How Resumability Works

1. Server renders HTML with serialized state
2. Browser displays HTML immediately (zero JS)
3. User interacts with an element
4. Qwik loads only the required handler
5. Handler executes with serialized state

This approach provides instant page loads and optimal performance.

SSR Options

Configure the Qwik adapter with options:

import { qwik } from '@flightdev/ui-qwik';

const adapter = qwik({
    containerTagName: 'div',
    containerAttributes: {
        id: 'qwik-app',
    },
});

Available Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | containerTagName | string | 'div' | Container element tag | | containerAttributes | object | {} | Attributes for container element |

API Reference

qwik(options?)

Create a Qwik adapter instance.

function qwik(options?: QwikAdapterOptions): QwikAdapter;

QwikAdapter

| Method | Description | |--------|-------------| | renderToString(component, context?) | Render to HTML string | | getHydrationScript(result) | Generate hydration script | | getClientEntry() | Get client entry code |

Capabilities

| Capability | Supported | |------------|-----------| | Streaming | Yes | | Partial Hydration | Yes | | Islands | Yes | | Resumable | Yes | | SSG | Yes | | CSR | Yes | | Server Components | No |

License

MIT