--- type: package title: remix/ui/server --- # remix/ui/server Remix UI can render to HTML on the server using two APIs: - `renderToString` - Returns a complete HTML string. Simple, but buffers the entire response. - `renderToStream` - Returns a `ReadableStream`. Sends the initial HTML immediately and streams frame content as it resolves. Both are exported from `remix/ui/server`. ## renderToString Renders a component tree to a complete HTML string. Use this when you need the full output before responding (e.g., generating static pages or embedding HTML in an email). ```tsx import { renderToString } from 'remix/ui/server' let html = await renderToString() ``` ## renderToStream Renders a component tree to a streaming response. The initial HTML is sent immediately. Any `` components with a `fallback` prop will render the fallback first, then stream the resolved content as it becomes available. ```tsx import { renderToStream } from 'remix/ui/server' let stream = renderToStream(, { frameSrc: request.url, signal: request.signal, resolveFrame(src, _target, context) { let frameUrl = new URL(src, context?.currentFrameSrc ?? request.url) return fetchHtml(frameUrl) }, onError(error) { console.error(error) }, }) return new Response(stream, { headers: { 'Content-Type': 'text/html; charset=utf-8' }, }) ``` ### Options - **`frameSrc`** - Seeds SSR frame state for the current render. When provided, server-rendered components can read `handle.frame.src` and `handle.frames.top.src` during SSR. - **`topFrameSrc`** - Overrides the root frame URL used for `handle.frames.top.src`. This is mainly useful when calling `renderToStream()` from inside `resolveFrame()` for a nested frame render. - **`signal`** - Cancels pending server rendering work. Pass `request.signal` so client disconnects can stop unresolved frame work without invoking `onError` for the disconnect itself. - **`resolveFrame(src, target, context)`** - Called when a `` needs its content. Return a string of HTML, a `ReadableStream`, or a promise of either. `context.currentFrameSrc` is the URL for the frame that contains the ``, and `context.topFrameSrc` is the outer document URL. Required if your component tree contains `` elements. - **`onError(error)`** - Called when a rendering error occurs. If not provided, the stream rejects with the error. When you render nested frame responses with `renderToStream()` inside `resolveFrame()`, pass `frameSrc` for the frame being rendered and carry `topFrameSrc` forward from the parent context. That preserves `handle.frames.top.src` across the whole SSR frame tree. ### Streaming behavior When the stream encounters a `` component: - **Without `fallback`** (blocking): The frame content is awaited before the initial HTML chunk is sent. The resolved content appears inline. - **With `fallback`** (non-blocking): The fallback is rendered inline in the initial chunk. Once the frame resolves, a `