To help you get started, we've collected the most common ways that preact-render-to-string is being used within popular public projects.

Download / preact-layout / test / Layout.spec.jsx View on Github

<div>
					<header>
						<h1>my page</h1>
					</header>
					<div>
						<article>main article</article>
					</div>
					<footer>
						goodbye
					</footer>
				</div>
			`.replace(/\s+\s+/g, '&gt;')

			expect(result).toBe(expectedResult)

			result = render(
				
					
				
			)

			// work around preact-render-to-string generating comment
			// nodes for empty (null/undefined) vdom elements. It's
			// a bug according to Jason
			result = result.replace(//g, '')

			const reversedExpected = `
				<div>
					<footer>
						goodbye
					</footer>
					<div></div></div>

View more ways to use preact-render-to-string

preact-render-to-string

Render JSX and Preact components to an HTML string.

Works in Node & the browser, making it useful for universal/isomorphic rendering.

&gt;&gt; Cute Fox-Related Demo (@ CodePen) <<

Render JSX/VDOM to HTML

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>

Render Preact Components to HTML

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 }) =&gt; (
	<div class="{`box">{children}</div>
);

let html = render(
	
		
	
);

console.log(html);
// <div class="box box-open"><span class="fox">Finn</span></div>

Render JSX / Preact / Whatever via Express!

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) =&gt; {
	let html = render();
	// send it back wrapped up as an HTML5 document:
	res.send(`${html}`);
});

Error Boundaries

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-string

export 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 (
		Loading<p></p>}&gt;
			
		
	);
};

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 &amp; error handling
main().catch((error) =&gt; {
	console.error(error);
});

License

MIT