Skip to content
Rimitive Rimitive Rimitive

Client Hydration

This guide covers hydrating server-rendered HTML on the client. Read Server Rendering first to set up the server side.

What is Hydration?

Section titled “What is Hydration?”

Hydration attaches your app’s reactivity to existing DOM elements without recreating them.

Setting Up Hydration

Section titled “Setting Up Hydration”

The key is createHydrationAdapter(), which takes a hydration adapter as the first argument and the fallback DOM adapter as the second:

client.ts
import { createDOMAdapter } from '@rimitive/view/adapters/dom';
import {
  createDOMHydrationAdapter,
  createHydrationAdapter,
} from '@rimitive/ssr/client';
import { createService } from './service.js';
import { App } from './App.js';


// 👇 Create hydration adapter that walks existing DOM
const hydrationAdapter = createHydrationAdapter(
  createDOMHydrationAdapter(document.querySelector('.app')!),
  // Falls back after hydration!
  createDOMAdapter()
);


// Create your service as usual on the client
const service = createService(hydrationAdapter);


// Hydrate - walks existing DOM, wires up reactivity
App(service).create(service);


// Switch to the fallback normal DOM mode for future updates
hydrationAdapter.switchToFallback();

Browser-Only Code

Section titled “Browser-Only Code”

Guard browser-specific code. See Intro to SSR for details.

If you have no asynchronous data to fetch and load on the server, this might be enough for your use case and you can stop here. Otherwise, onwards to async.

Next Steps

Section titled “Next Steps”

This covers basic hydration for synchronous SSR. For async data: