{"slug":"server","title":"Server & streaming","headings":["SSR","Hydration","Streaming","Out-of-order slots","Server functions (rpc)"],"contentHtml":"

Server & streaming

SSR

import { createApp, renderToString } from \"ruri/server\"\nimport { App } from \"./app.js\"\n\ncreateApp()\n    .get(\"/\", (context) => context.html(renderToString(App())))\n    .static(new URL(\"./public\", import.meta.url))\n    .listen(3000)

Hydration

import { hydrate } from \"ruri\"\n\nhydrate(document.getElementById(\"app\"), App)

Hydration replays the component against the server-rendered DOM: matching nodes are adopted in place, handlers attached and signals bound to the existing text nodes. Mismatches fall back to a full client render.

Streaming

import { renderToStream } from \"ruri/server\"\n\nnew Response(renderToStream(App()))

Out-of-order slots

import { createSlot, slotPlaceholder, streamSlots } from \"ruri/server\"\n\nconst panel = createSlot(renderUserPanelLater())\nreturn streamSlots({\n  shell: `<body>${slotPlaceholder(panel)}</body>`,\n  slots: [panel],\n})

Server functions (rpc)

app.rpc({ async addTodo(text) { /* ... */ } })\n\n// client\nimport { rpc } from \"ruri\"\nconst todo = await rpc(\"addTodo\", \"write docs\")
"}