Page Handlers

Specialized handler functions for server-side rendering with different frontend frameworks. All handlers provide complete type safety from server to client.

#Handler Behavior

Framework Handlers

React, Angular, Svelte, Vue handlers perform server-side rendering and return hydrated HTML.

Static Handlers

HTML and HTMX handlers serve pre-built files directly without SSR processing.

All handlers work seamlessly with Elysia's routing system and return properly formatted responses. Framework handlers require the manifest from prepare(). Always use asset(manifest, key) to look up script paths: it will throw if the artifact doesn't exist.

#handleReactPageRequest

Handles server-side rendering for React pages. The component is rendered to HTML with createElement, then hydrated on the client with the provided index script.

Parameter	Type	Description
`pageComponent`	`React.ComponentType<Props>`	Your React page component from the pages directory
`index`	`string`	Path to the hydration script from asset(manifest, key)
`props`	`Props`	Type-safe props matching the component requirements (optional)
`options`	`FrameworkPageHandlerOptions`	Enable framework slot streaming by collecting registered slots during SSR. Disabled by default.

import { asset } from '@absolutejs/absolute';
import { handleReactPageRequest } from '@absolutejs/absolute/react';
import { Elysia } from 'elysia';
import { Home } from './pages/Home';

const app = new Elysia()
  .get('/', () =>
    handleReactPageRequest({
      Page: Home,
      index: asset(manifest, 'HomeIndex'),
      props: { count: 0 }
    })
  )
  .listen(3000);

#handleAngularPageRequest

Handles server-side rendering for Angular pages. Uses a factory importer pattern for lazy loading Angular components.

Parameter	Type	Description
`importer`	`() => Promise<{ factory: AngularPageFactory<Props> }>`	Async function that imports the Angular page factory
`pagePath`	`string`	Path to compiled Angular page for SSR
`indexPath`	`string`	Path to hydration script from asset(manifest, key)
`headTag`	`<head>...</head>`	Custom head element (use generateHeadElement helper)
`props`	`Props`	Type-safe props (optional if component has no props)
`options`	`FrameworkPageHandlerOptions`	Enable framework slot streaming by collecting registered slots during SSR. Disabled by default.

import { asset, generateHeadElement } from '@absolutejs/absolute';
import { handleAngularPageRequest } from '@absolutejs/absolute/angular';
import { Elysia } from 'elysia';
import type * as DashboardPage from './angular/Dashboard.server';

const app = new Elysia()
  .get('/angular', () =>
    handleAngularPageRequest<typeof DashboardPage>({
      pagePath: asset(manifest, 'Dashboard'),
      indexPath: asset(manifest, 'DashboardIndex'),
      headTag: generateHeadElement({
        title: 'AbsoluteJS + Angular',
        description: 'An Angular example with AbsoluteJS'
      }),
      props: { user: { name: 'Alex' } }
    })
  )
  .listen(3000);

#handleSveltePageRequest

Handles server-side rendering for Svelte pages. The component parameter is only used for type inference: the actual rendering uses the compiled page at pagePath.

Parameter	Type	Description
`PageComponent`	`SvelteComponent<Props>`	Raw Svelte component (used only for type inference)
`pagePath`	`string`	Path to compiled Svelte page for SSR
`indexPath`	`string`	Path to hydration script from asset(manifest, key)
`props`	`Props`	Type-safe props (optional if component has no props)
`options`	`FrameworkPageHandlerOptions`	Enable framework slot streaming by collecting registered slots during SSR. Disabled by default.

import { asset } from '@absolutejs/absolute';
import { handleSveltePageRequest } from '@absolutejs/absolute/svelte';
import { Elysia } from 'elysia';
import type SvelteExample from './components/SvelteExample.svelte';

const app = new Elysia()
  .get('/svelte', () =>
    handleSveltePageRequest<typeof SvelteExample>({
      pagePath: asset(manifest, 'SvelteExample'),
      indexPath: asset(manifest, 'SvelteExampleIndex'),
      props: {
        initialCount: 0,
        cssPath: asset(manifest, 'SvelteExampleCSS')
      }
    })
  )
  .listen(3000);

#handleVuePageRequest

Handles server-side rendering for Vue pages. Vue components cannot include page elements like head, so you pass a headTag parameter (use generateHeadElement helper for convenience).

Parameter	Type	Description
`_PageComponent`	`VueComponent<Props>`	Raw Vue component (used only for type inference)
`pagePath`	`string`	Path to compiled Vue page for SSR
`indexPath`	`string`	Path to hydration script from asset(manifest, key)
`headTag`	`<head>...</head>`	Custom head element (use generateHeadElement helper)
`props`	`Props`	Type-safe props (optional if component has no props)
`options`	`FrameworkPageHandlerOptions`	Enable framework slot streaming by collecting registered slots during SSR. Disabled by default.

import { asset, generateHeadElement } from '@absolutejs/absolute';
import { handleVuePageRequest } from '@absolutejs/absolute/vue';
import { Elysia } from 'elysia';
import type VueExample from './components/VueExample.vue';

const app = new Elysia()
  .get('/vue', () =>
    handleVuePageRequest<typeof VueExample>({
      pagePath: asset(manifest, 'VueExample'),
      indexPath: asset(manifest, 'VueExampleIndex'),
      headTag: generateHeadElement({
        cssPath: asset(manifest, 'VueExampleCSS'),
        title: 'AbsoluteJS + Vue',
        description: 'A Vue.js example with AbsoluteJS'
      }),
      props: { initialCount: 0 }
    })
  )
  .listen(3000);

#handleHTMLPageRequest

Serves static HTML files directly. The file still goes through the build process to update resource paths to their bundled versions.

Parameter	Type	Description
`html`	`string`	Path to the HTML file

import { handleHTMLPageRequest } from '@absolutejs/absolute';
import { Elysia } from 'elysia';

const app = new Elysia()
  .get('/html', () =>
    handleHTMLPageRequest('build/pages/HTMLExample.html')
  )
  .listen(3000);

#handleHTMXPageRequest

Serves HTMX template files. Like HTML handler, files go through the build process for path updates.

Parameter	Type	Description
`htmx`	`string`	Path to the HTMX template file

import { handleHTMXPageRequest } from '@absolutejs/absolute';
import { Elysia } from 'elysia';

const app = new Elysia()
  .get('/htmx', () =>
    handleHTMXPageRequest('build/pages/HTMXExample.html')
  )
  .listen(3000);

PreviousDeployment · Docker NextTypes