migrate server rendering reference pages

LadyBluenotes · LadyBluenotes · commit e3b30c63b75f · 2026-04-03T14:05:34.000-07:00
diff --git a/src/routes/reference/rendering/render-to-stream.mdx b/src/routes/reference/rendering/render-to-stream.mdx
@@ -1,63 +1,118 @@
 ---
 title: renderToStream
 use_cases: >-
-  streaming ssr, progressive rendering, async data loading, suspense boundaries,
-  large page optimization
+  streaming server rendering, progressive HTML delivery, suspense-driven server
+  output
 tags:
   - ssr
   - streaming
   - async
   - suspense
-  - performance
 version: "1.0"
 description: >-
-  Stream HTML progressively with renderToStream. Render content synchronously
-  then stream async resources as they complete for faster loading.
+  Stream server-rendered HTML and continue writing async content as it
+  resolves.
 ---
 
+`renderToStream` streams server-rendered HTML and continues writing async content as it resolves.
+
+## Import
+
 ```ts
 import { renderToStream } from "solid-js/web";
+```
 
+## Type
+
+```ts
 function renderToStream<T>(
 	fn: () => T,
 	options?: {
 		nonce?: string;
 		renderId?: string;
-		onCompleteShell?: () => void;
-		onCompleteAll?: () => void;
+		onCompleteShell?: (info: { write: (v: string) => void }) => void;
+		onCompleteAll?: (info: { write: (v: string) => void }) => void;
+		onError?: (err: any) => void;
 	}
 ): {
 	pipe: (writable: { write: (v: string) => void }) => void;
-	pipeTo: (writable: WritableStream) => void;
+	pipeTo: (writable: WritableStream) => Promise<void>;
 };
 ```
 
-This method renders to a stream.
-It renders the content synchronously including any Suspense fallback placeholders, and then continues to stream the data and HTML from any async resource as it completes.
+## Parameters
+
+### `fn`
+
+- **Type:** `() => T`
+
+Function that returns the root output to render.
+
+### `options`
+
+#### `nonce`
+
+- **Type:** `string`
+
+Nonce applied to inline scripts emitted during rendering.
+
+#### `renderId`
+
+- **Type:** `string`
+
+Identifier used to namespace the render output.
+
+#### `onCompleteShell`
+
+- **Type:** `(info: { write: (v: string) => void }) => void`
+
+Callback invoked when the shell is ready to flush.
+
+#### `onCompleteAll`
+
+- **Type:** `(info: { write: (v: string) => void }) => void`
+
+Callback invoked after all server suspense boundaries have settled.
+
+#### `onError`
+
+- **Type:** `(err: any) => void`
+
+Callback invoked when a rendering error is encountered.
+
+## Return value
+
+- **Type:** `{ pipe: ..., pipeTo: ... }`
+
+Streaming controller with `pipe` and `pipeTo` methods.
+
+## Behavior
+
+- `renderToStream` writes the shell synchronously, including suspense fallback content.
+- Async content and serialized data continue streaming as resources resolve.
+- `pipe` writes to Node-style writable targets.
+- `pipeTo` writes to a `WritableStream`.
+
+## Examples
+
+### `pipe`
 
 ```ts
-// node
-renderToStream(App).pipe(res);
+import { renderToStream } from "solid-js/web";
 
-// web stream
-const { readable, writable } = new TransformStream();
-renderToStream(App).pipeTo(writable);
+renderToStream(() => <App />).pipe(response);
 ```
 
-`onCompleteShell` fires when synchronous rendering is complete before writing the first flush to the stream out to the browser.
-`onCompleteAll` is called when all server Suspense boundaries have settled.
-`renderId` is used to namespace renders when having multiple top level roots.
+### `pipeTo`
 
-:::note
-This API replaces the previous pipeToWritable and pipeToNodeWritable
-APIs.
-:::
+```ts
+import { renderToStream } from "solid-js/web";
+
+const { writable } = new TransformStream();
+await renderToStream(() => <App />).pipeTo(writable);
+```
 
-## Options
+## Related
 
-| Name            | Type       | Description                                                      |
-| --------------- | ---------- | ---------------------------------------------------------------- |
-| nonce           | string     | The nonce to use for inline scripts.                             |
-| renderId        | string     | The id to use for this render.                                   |
-| onCompleteShell | () => void | A callback that fires when the shell is complete.                |
-| onCompleteAll   | () => void | A callback that fires when all Suspense boundaries have settled. |
+- [`renderToString`](/reference/rendering/render-to-string)
+- [`renderToStringAsync`](/reference/rendering/render-to-string-async)
diff --git a/src/routes/reference/rendering/render-to-string-async.mdx b/src/routes/reference/rendering/render-to-string-async.mdx
@@ -1,46 +1,104 @@
 ---
 title: renderToStringAsync
 use_cases: >-
-  ssr with async data, suspense resolution, complete page rendering, data
-  serialization, seo optimization
+  async server rendering, waiting for suspense boundaries, HTML generation with
+  async data
 tags:
   - ssr
   - async
   - suspense
-  - serialization
   - rendering
 version: "1.0"
 description: >-
-  Render complete HTML with async data using renderToStringAsync. Waits for all
-  Suspense boundaries before returning serialized results.
+  Render HTML to a string after async suspense boundaries settle.
 ---
 
+`renderToStringAsync` renders HTML to a string after async suspense boundaries settle.
+
+## Import
+
 ```ts
 import { renderToStringAsync } from "solid-js/web";
+```
 
+## Type
+
+```ts
 function renderToStringAsync<T>(
 	fn: () => T,
 	options?: {
 		timeoutMs?: number;
-		renderId?: string;
 		nonce?: string;
+		renderId?: string;
+		noScripts?: boolean;
+		onError?: (err: any) => void;
 	}
 ): Promise<string>;
 ```
 
-Same as `renderToString` except that it will wait for all `<Suspense>` boundaries to resolve before returning the results.
-Resource data is automatically serialized into the script tag and will be hydrated on client load.
+## Parameters
+
+### `fn`
+
+- **Type:** `() => T`
+
+Function that returns the root output to render.
+
+### `options`
+
+#### `timeoutMs`
+
+- **Type:** `number`
+
+Maximum wait time for suspense boundaries before the render resolves.
+
+#### `nonce`
+
+- **Type:** `string`
+
+Nonce applied to inline scripts emitted during rendering.
 
-`renderId` is used to namespace renders when having multiple top level roots.
+#### `renderId`
+
+- **Type:** `string`
+
+Identifier used to namespace the render output.
+
+#### `noScripts`
+
+- **Type:** `boolean`
+
+Disables script emission in the rendered output.
+
+#### `onError`
+
+- **Type:** `(err: any) => void`
+
+Callback invoked when a rendering error is encountered.
+
+## Return value
+
+- **Type:** `Promise<string>`
+
+Promise that resolves to the rendered HTML string.
+
+## Behavior
+
+- `renderToStringAsync` waits for server suspense boundaries to settle before resolving.
+- Resource data is serialized for client hydration unless scripts are disabled.
+- `renderId` namespaces the render output when multiple top-level roots are present.
+
+## Examples
+
+### Basic usage
 
 ```ts
-const html = await renderToStringAsync(App);
+import { renderToStringAsync } from "solid-js/web";
+
+const html = await renderToStringAsync(() => <App />);
 ```
 
-## Options
+## Related
 
-| Name        | Type     | Description                                                                                  |
-| ----------- | -------- | -------------------------------------------------------------------------------------------- |
-| `timeoutMs` | `number` | The number of milliseconds to wait for a `<Suspense>` boundary to resolve before timing out. |
-| `renderId`  | `string` | The id to use for the render.                                                                |
-| `nonce`     | `string` | The nonce to use for the script tag.                                                         |
+- [`renderToString`](/reference/rendering/render-to-string)
+- [`renderToStream`](/reference/rendering/render-to-stream)
diff --git a/src/routes/reference/rendering/render-to-string.mdx b/src/routes/reference/rendering/render-to-string.mdx
@@ -1,45 +1,89 @@
 ---
 title: renderToString
 use_cases: >-
-  basic ssr, static site generation, synchronous rendering, progressive
-  hydration, seo pages
+  synchronous server rendering, HTML generation, progressive hydration output
 tags:
   - ssr
   - rendering
   - hydration
   - synchronous
-  - static
 version: "1.0"
 description: >-
-  Generate HTML strings synchronously with renderToString. Perfect for SSR with
-  progressive hydration and static site generation needs.
+  Render HTML to a string synchronously on the server.
 ---
 
+`renderToString` renders HTML to a string synchronously on the server.
+
+## Import
+
 ```ts
 import { renderToString } from "solid-js/web";
+```
+
+## Type
 
+```ts
 function renderToString<T>(
 	fn: () => T,
 	options?: {
 		nonce?: string;
 		renderId?: string;
+		onError?: (err: any) => void;
 	}
 ): string;
 ```
 
-Renders to a string synchronously.
-The function also generates a script tag for progressive hydration.
-Options include eventNames to listen to before the page loads and play back on hydration, and nonce to put on the script tag.
+## Parameters
+
+### `fn`
+
+- **Type:** `() => T`
+
+Function that returns the root output to render.
+
+### `options`
+
+#### `nonce`
+
+- **Type:** `string`
+
+Nonce applied to inline scripts emitted during rendering.
+
+#### `renderId`
 
-`renderId` is used to namespace renders when having multiple top level roots.
+- **Type:** `string`
+
+Identifier used to namespace the render output.
+
+#### `onError`
+
+- **Type:** `(err: any) => void`
+
+Callback invoked when a rendering error is encountered.
+
+## Return value
+
+- **Type:** `string`
+
+Rendered HTML string.
+
+## Behavior
+
+- `renderToString` completes synchronously.
+- The output includes hydration data for progressive hydration.
+- `renderId` namespaces the render output when multiple top-level roots are present.
+
+## Examples
+
+### Basic usage
 
 ```ts
-const html = renderToString(App);
+import { renderToString } from "solid-js/web";
+
+const html = renderToString(() => <App />);
 ```
 
-## Options
+## Related
 
-| Name       | Type     | Description                          |
-| ---------- | -------- | ------------------------------------ |
-| `nonce`    | `string` | The nonce to use for the script tag. |
-| `renderId` | `string` | The id to use for the script tag.    |
+- [`renderToStringAsync`](/reference/rendering/render-to-string-async)
+- [`renderToStream`](/reference/rendering/render-to-stream)
diff --git a/src/routes/reference/rendering/render.mdx b/src/routes/reference/rendering/render.mdx
