Playground

SSR & Continuity (CRM)

PawaJS does not use traditional hydration. Instead, it implements a Continuity Rendering Model (CRM) focused on resumability.

Think of it like a relay race: the server starts the race by rendering the initial view, then passes the baton to the client. The client simply picks up where the server left off, attaching reactivity to the existing DOM without the overhead of re-rendering the entire tree.

pawajs-continue

To enable this behavior, you need the pawajs-continue package. It handles the "baton pass," attaching event listeners and reactivity to the existing DOM generated by pawa-ssr.

Installation

bash 
                
npm install pawajs-continue

Client Entry Point

In your client-side entry file (e.g., main.js), you must initialize the resumer before starting the app.

javascript 
                
import { isServer } from "pawajs/server";
import { RegisterComponent, pawaStartApp } from "pawajs";
import { initiateResumer } from "pawajs-continue";
import { App } from "./App.js";

// Register your root component and others
RegisterComponent(App);

if (!isServer()) {
    const app = document.getElementById('app');
    
    // 1. Initialize the continuity engine
    initiateResumer();
    
    // 2. Start the app (hydrates the existing DOM)
    pawaStartApp(app);
}

How it Works

  • Server-Side (The Start): pawa-ssr renders the HTML and embeds serialized data (props, state) into comments.
  • Client-Side (The Baton Pass): pawajs-continue scans the DOM during startup.
  • Continuity (Resumability): Instead of creating new DOM elements (hydration), the client locates the specific elements marked by the server and attaches reactive effects to them.

API Reference

initiateResumer()

Initializes the hydration logic for attributes, text, loops (for-each), conditionals (if), and components. This must be called before pawaStartApp on the client.

Stay Updated

For more in-depth guides and the latest updates on implementing pawajs, pawa-ssr, and pawajs-continue, please visit the official GitHub repository.