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>`); });Suspense & lazy components with preact/compat & preact-ssr-prepass
npm install preact preact-render-to-string preact-ssr-prepassexport 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 { render } from "preact-render-to-string" import prepass from "preact-ssr-prepass" import { Main } from "./main" const main = async () => { // Creation of the virtual DOM const vdom = <Main /> // Pre-rendering of lazy components await prepass(vdom) // Rendering of components const html = render(vdom) console.log(html) // <h1>Home page</h1> } // Execution & error handling main().catch(error => { console.error(error) })
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
