@aletso/atom-router

TanStack Router SSR integration for @effect-atom/atom-react registries.

This package wires router dehydration and hydration to include atom state and streamed updates.

Install

pnpm add @aletso/atom-router @effect-atom/atom-react @tanstack/react-router @tanstack/router-core react effect

Setup

Example router setup.

import { Registry } from "@effect-atom/atom-react";
import { setupRouterSsrAtomIntegration } from "@aletso/atom-router/components/setup-router-ssr-atom-integration";
import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

export function getRouter() {
  const registry = Registry.make({ defaultIdleTTL: 400 });

  const router = createRouter({
    routeTree,
    defaultGcTime: 0,
    defaultStaleTime: 0,
    context: { registry },
  });

  setupRouterSsrAtomIntegration({ router, registry });

  return router;
}

How it is used with data prefetch

When route loaders prefetch atoms on the server, this integration ensures dehydrated atom values are available to the client after hydration.

import { createIsomorphicFn } from "@tanstack/react-start";
import { surveyFindManyServer } from "../data/survey/server";
import { serverRuntime } from "../routes/api/rpc/$";

export const prefetchSurveyList = createIsomorphicFn().server((context) =>
  surveyFindManyServer.prefetch(context.registry, serverRuntime),
);

What setupRouterSsrAtomIntegration does

• wraps router output with RegistryContext.Provider
• extends router dehydrate() result with atomState and an atomStream
• hydrates initial atom state on the client
• keeps reading streamed atom chunks and hydrates them incrementally

Public entry points

• @aletso/atom-router/components/setup-router-ssr-atom-integration