AbsoluteJS

SSR Model

Understanding how AbsoluteJS handles server-side rendering across multiple frameworks.

#How SSR Works in AbsoluteJS

AbsoluteJS provides a unified SSR model that works the same way regardless of which frontend framework you use. The lifecycle has two phases: a one-time startup phase where prepare() loads your config and bundles your code, and a request phase where each incoming request is routed to a page handler that renders your component to a streamed HTML response, then the client hydrates it for interactivity.

1
Onceprepare()
Load config, bundle
2
Each requestRequest
GET /page
3
Each requestFetch Data
DB query, auth
4
Each requestRender
Component → HTML
5
Each requestStream
Progressive delivery
6
Each requestHydrate
Interactive on client

#Build Once, Serve Many

The prepare() function runs once when your server starts. It loads your absolute.config.ts, bundles all frontend code, and returns a manifest:

TS
const { absolutejs, manifest } = await prepare();

// manifest maps component names to their bundled assets
// { "HomeIndex": "/build/HomeIndex-a3f2.js", ... }

This manifest is then used by page handlers to locate the correct assets for each route.

#Streaming Responses

AbsoluteJS uses streaming to send HTML progressively to the browser. This means users see content faster, even for complex pages:

TS
.get('/', () =>
  handleReactPageRequest({ Page: Home, index: asset(manifest, 'HomeIndex') })
)

#Hydration

After the HTML arrives, the client-side JavaScript "hydrates" the page, attaching event handlers and making it interactive:

TSX
type HomeProps = {
  user: User | null;
};

export const Home = ({ user }: HomeProps) => (
  <html>
    <body>
      <h1>Welcome, {user?.name ?? 'Guest'}</h1>
    </body>
  </html>
);

#Props Serialization

Props passed to your components are automatically serialized and made available on both server and client:

TS
.get('/', async ({ cookie }) => {
  const user = await getUser(cookie);

  return handleReactPageRequest({
    Page: Home,
    index: asset(manifest, 'HomeIndex'),
    props: { user } // available on server AND client
  });
})

Props must be serializable (no functions, circular references, or class instances).