Render JSX and Preact components to an HTML string.
Works in Node & the browser, making it useful for universal/isomorphic rendering.
>> Cute Fox-Related Demo (@ CodePen) <<
import { render } from 'preact-render-to-string'; import { h } from 'preact'; /** @jsx h */ let vdom = <div class="foo">content</div>; let html = render(vdom); console.log(html); // <div class="foo">content</div>import { render } from 'preact-render-to-string'; import { h, Component } from 'preact'; /** @jsx h */ // Classical components work class Fox extends Component { render({ name }) { return <span class="fox">{name}</span>; } } // ... and so do pure functional components: const Box = ({ type, children }) => ( <div class={`box box-${type}`}>{children}</div> ); let html = render( <Box type="open"> <Fox name="Finn" /> </Box> ); console.log(html); // <div class="box box-open"><span class="fox">Finn</span></div>import express from 'express'; import { h } from 'preact'; import { render } from 'preact-render-to-string'; /** @jsx h */ // silly example component: const Fox = ({ name }) => ( <div class="fox"> <h5>{name}</h5> <p>This page is all about {name}.</p> </div> ); // basic HTTP server via express: const app = express(); app.listen(8080); // on each request, render and return a component: app.get('/:fox', (req, res) => { let html = render(<Fox name={req.params.fox} />); // send it back wrapped up as an HTML5 document: res.send(`<!DOCTYPE html><html><body>${html}</body></html>`); });Rendering errors can be caught by Preact via getDerivedStateFromErrors or componentDidCatch. To enable that feature in preact-render-to-string set errorBoundaries = true
import { options } from 'preact'; // Enable error boundaries in `preact-render-to-string` options.errorBoundaries = true;Suspense & lazy components with preact/compat
npm install preact preact-render-to-stringexport default () => { return <h1>Home page</h1>; };import { Suspense, lazy } from 'preact/compat'; // Creation of the lazy component const HomePage = lazy(() => import('./pages/home')); const Main = () => { return ( <Suspense fallback={<p>Loading</p>}> <HomePage /> </Suspense> ); };import { renderToStringAsync } from 'preact-render-to-string'; import { Main } from './main'; const main = async () => { // Rendering of lazy components const html = await renderToStringAsync(<Main />); console.log(html); // <h1>Home page</h1> }; // Execution & error handling main().catch((error) => { console.error(error); });
