Server-Side Rendering

import { useLiveQuery } from "@rindle/react";

type Note = { id: number; title: string };

export function Notes() {
  const { rows, status, error } = useLiveQuery<Note>("/api/notes");
  if (error) return <p>Couldn't load notes: {error.message}</p>;
  if (status === "loading") return <p>Loading…</p>;
  return <ul>{rows.map((n) => <li key={n.id}>{n.title}</li>)}</ul>;
}

import { createRindleSessions, createSSRClient } from "@rindle/reactive-sql-client";
import { RindleProvider } from "@rindle/react";
import { renderToReadableStream } from "react-dom/server";

const rindle = createRindleSessions(); // reads RINDLE_URL

export async function renderPage(request: Request): Promise<Response> {
  const user = await getUser(request); // your auth
  const db = createSSRClient({ rindle, request, userID: user?.id });

  const stream = await renderToReadableStream(
    <RindleProvider client={db}>
      <App />
    </RindleProvider>,
  );
  await stream.allReady;
  const app = await new Response(stream).text();

  return new Response(
    `<!doctype html>
     <div id="root">${app}</div>
     <script>${db.dehydrateScript()}</script>
     <script type="module" src="/client.js"></script>`,
    {
      headers: {
        "Content-Type": "text/html",
        "Cache-Control": "private, no-store",
      },
    },
  );
}

import { createReactiveSqlClient } from "@rindle/reactive-sql-client";
import { RindleProvider } from "@rindle/react";
import { hydrateRoot } from "react-dom/client";

const db = await createReactiveSqlClient({ stream: "/api/rindle-connect", hydrate: true });

hydrateRoot(
  document.getElementById("root")!,
  <RindleProvider client={db}>
    <App />
  </RindleProvider>,
);

// lib/render.ts — server only
import { headers } from "next/headers";
import { after, connection } from "next/server";
import { createSSRClient, type SSRClient } from "@rindle/reactive-sql-client";
import { rindle } from "./rindle";

const g = globalThis as { __rindleRenders?: Map<string, SSRClient> };
const renders = (g.__rindleRenders ??= new Map());

// `userID` is the same id the stream route passes to `rindle.connect` (undefined for a public page).
export async function beginRender(userID?: string): Promise<string> {
  await connection(); // render per request, never at build time
  const incoming = await headers();
  const proto = incoming.get("x-forwarded-proto") ?? "http";
  const request = new Request(`${proto}://${incoming.get("host")}/`, { headers: incoming });
  const db = createSSRClient({ rindle, request, userID });
  const id = crypto.randomUUID();
  renders.set(id, db);
  // Once the response is sent, wait for the browser to take the queries over, then forget them.
  after(async () => {
    db.dehydrateScript();
    await Promise.race([db.handedOff, new Promise((r) => setTimeout(r, 10_000))]);
    renders.delete(id);
  });
  return id;
}

// app/layout.tsx
import { beginRender } from "@/lib/render";
import { currentUser } from "@/lib/auth"; // however your endpoints read the signed-in user
import { RindleRoot } from "./RindleRoot";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const ssrID = await beginRender((await currentUser())?.id);
  return (
    <html lang="en">
      <body>
        <RindleRoot ssrID={ssrID}>{children}</RindleRoot>
      </body>
    </html>
  );
}

// app/RindleRoot.tsx
"use client";
import { useRef, useState, type ReactNode } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { RindleProvider } from "@rindle/react";
import { createReactiveStreamClient, type SSRClient } from "@rindle/reactive-sql-client";

// One browser client per page load. Kept outside React state, because React's development Strict
// Mode runs state initializers twice, and a second hydrating client would take over the queries.
let browserClient: ReturnType<typeof createReactiveStreamClient> | undefined;

export function RindleRoot({ ssrID, children }: { ssrID: string; children: ReactNode }) {
  const [state] = useState(() => {
    if (typeof window !== "undefined") {
      browserClient ??= createReactiveStreamClient({ stream: "/api/rindle-connect", hydrate: true });
      return { browser: browserClient };
    }
    const db = (globalThis as { __rindleRenders?: Map<string, SSRClient> }).__rindleRenders!.get(ssrID)!;
    // Count queries still loading, so the script is written once they have all arrived.
    const loads = new Map<string, Promise<void>>();
    let pending = 0;
    const client = {
      peek: db.peek,
      load(endpoint: string) {
        let p = loads.get(endpoint);
        if (!p) {
          pending++;
          p = db.load(endpoint).finally(() => pending--);
          loads.set(endpoint, p);
        }
        return p;
      },
    };
    return { server: { db, client, pending: () => pending } };
  });

  const written = useRef(false);
  useServerInsertedHTML(() => {
    const server = state.server;
    if (!server || written.current || server.pending() > 0) return null;
    written.current = true;
    return <script dangerouslySetInnerHTML={{ __html: server.db.dehydrateScript() }} />;
  });

  return <RindleProvider client={state.browser ?? state.server!.client}>{children}</RindleProvider>;
}