preact · Preact Docs
Preact Server-Side Rendering
Teaches how to implement server-side rendering in Preact using the preact-render-to-string package, covering both synchronous HTML string generation and asynchronous rendering for components using Suspense.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Preact Server-Side Rendering
Teaches how to implement server-side rendering in Preact using the preact-render-to-string package, covering both synchronous HTML string generation and asynchronous rendering for components using Suspense.
When To Use
Use when you need to render Preact components to HTML strings on a server to improve initial load times or support data fetching with Suspense.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-server-side-rendering-workflow-guide.md | A comprehensive guide covering the essentials, debugging, and advanced implementation of server-side rendering in Preact. | Questions about a comprehensive guide covering the essentials, debugging, and advanced implementation of server-side rendering in Pre... |
examples/preact-server-side-rendering-installation-command.text | The npm installation command for the preact-render-to-string package required for server-side rendering. | Exact payloads, commands, or snippets shown in The npm installation command for the preact-render-to-string package required for server-side rendering. |
examples/preact-server-side-rendering-render-to-string.text | A JavaScript code example demonstrating how to use renderToString from preact-render-to-string to convert a Preact component into an HTML string. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use renderToString from preact-render-to-string to convert a Preact co... |
examples/preact-server-side-rendering-app-js.text | A JavaScript implementation of a Preact application component using lazy loading for server-side rendering. | Exact payloads, commands, or snippets shown in A JavaScript implementation of a Preact application component using lazy loading for server-side rendering. |
examples/preact-server-side-rendering-render-to-string-async.text | A code example demonstrating the use of renderToStringAsync from preact-render-to-string to generate HTML for server-side rendering. | Exact payloads, commands, or snippets shown in A code example demonstrating the use of renderToStringAsync from preact-render-to-string to generate HTML for server-... |
examples/preact-server-side-rendering-lazy-component.text | A code example demonstrating how to handle lazy-loaded components during Preact server-side rendering. | Exact payloads, commands, or snippets shown in A code example demonstrating how to handle lazy-loaded components during Preact server-side rendering. |
examples/preact-server-side-rendering-lazy-component-hydration.text | A code example demonstrating how lazy components and suspended children behave during Preact server-side rendering and hydration. | Exact payloads, commands, or snippets shown in A code example demonstrating how lazy components and suspended children behave during Preact server-side rendering an... |
examples/preact-server-side-rendering-render-to-pipeable-stream-node.text | A Node.js code example demonstrating how to use renderToPipeableStream to handle server-side rendering requests. | Exact payloads, commands, or snippets shown in A Node.js code example demonstrating how to use renderToPipeableStream to handle server-side rendering requests. |
examples/preact-server-side-rendering-render-to-readable-stream.text | A code example demonstrating how to use renderToReadableStream to handle server-side rendering requests. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use renderToReadableStream to handle server-side rendering requests. |
examples/preact-server-side-rendering-render-to-string-2.text | A JavaScript code example demonstrating how to use renderToString from preact-render-to-string to convert a Preact component into an HTML string. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use renderToString from preact-render-to-string to convert a Preact co... |
examples/preact-server-side-rendering-render-to-string-3.text | A JavaScript code example demonstrating how to use renderToString to convert a Preact component into an HTML string. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use renderToString to convert a Preact component into an HTML string. |
examples/preact-server-side-rendering-render-to-string-4.text | A JavaScript code example demonstrating how to use renderToString from preact-render-to-string to convert a Preact component into an HTML string. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use renderToString from preact-render-to-string to convert a Preact co... |
examples/preact-server-side-rendering-render-to-string-javascript.text | A JavaScript code example demonstrating how to use the renderToString function to convert Preact components into HTML strings. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the renderToString function to convert Preact components into HTML... |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/server-side-rendering