preact-render-to-string
Render JSX to an HTML string, with support for Preact components.
Last updated a year ago by marvinhagemeister .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ gnpm install preact-render-to-string 
SYNC missed versions from official npm registry.

preact-render-to-string

NPM Build status

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


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 }) => (
	<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>

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) => {
	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>`);
});

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 & preact-ssr-prepass

npm install preact preact-render-to-string preact-ssr-prepass
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 (
		<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);
});

License

MIT

Current Tags

  • 6.0.0-experimental.0                                ...           experimental (3 years ago)
  • 6.3.1                                ...           latest (a year ago)
  • 5.0.6                                ...           next (5 years ago)

97 Versions

  • 6.3.1                                ...           a year ago
  • 6.3.0                                ...           a year ago
  • 6.2.2                                ...           a year ago
  • 6.2.1                                ...           a year ago
  • 6.2.0                                ...           a year ago
  • 6.1.0                                ...           2 years ago
  • 6.0.3                                ...           2 years ago
  • 6.0.2                                ...           2 years ago
  • 6.0.1                                ...           2 years ago
  • 6.0.0                                ...           2 years ago
  • 5.2.6                                ...           2 years ago
  • 5.2.5                                ...           2 years ago
  • 5.2.4                                ...           2 years ago
  • 5.2.3                                ...           2 years ago
  • 5.2.2                                ...           2 years ago
  • 5.2.1                                ...           2 years ago
  • 5.2.0                                ...           3 years ago
  • 5.1.21                                ...           3 years ago
  • 5.1.20                                ...           3 years ago
  • 6.0.0-experimental.0                                ...           3 years ago
  • 5.1.19                                ...           4 years ago
  • 5.1.18                                ...           4 years ago
  • 5.1.17                                ...           4 years ago
  • 5.1.16                                ...           4 years ago
  • 5.1.15                                ...           4 years ago
  • 5.1.14                                ...           4 years ago
  • 5.1.13                                ...           4 years ago
  • 5.1.12                                ...           4 years ago
  • 5.1.11                                ...           4 years ago
  • 5.1.10                                ...           4 years ago
  • 5.1.9                                ...           5 years ago
  • 5.1.8                                ...           5 years ago
  • 5.1.7                                ...           5 years ago
  • 5.1.6                                ...           5 years ago
  • 5.1.5                                ...           5 years ago
  • 5.1.4                                ...           5 years ago
  • 5.1.3                                ...           5 years ago
  • 5.1.2                                ...           5 years ago
  • 5.1.1                                ...           5 years ago
  • 5.1.0                                ...           5 years ago
  • 5.0.7                                ...           5 years ago
  • 5.0.6                                ...           5 years ago
  • 5.0.5                                ...           5 years ago
  • 5.0.4                                ...           5 years ago
  • 5.0.3                                ...           6 years ago
  • 5.0.2                                ...           6 years ago
  • 5.0.1                                ...           6 years ago
  • 5.0.0                                ...           6 years ago
  • 4.1.0                                ...           6 years ago
  • 3.8.2                                ...           6 years ago
  • 4.0.1                                ...           6 years ago
  • 4.0.0                                ...           6 years ago
  • 3.8.1                                ...           6 years ago
  • 3.8.0                                ...           6 years ago
  • 3.7.2                                ...           6 years ago
  • 3.7.1                                ...           6 years ago
  • 3.7.0                                ...           7 years ago
  • 3.6.3                                ...           8 years ago
  • 3.6.2                                ...           8 years ago
  • 3.6.1                                ...           8 years ago
  • 3.6.0                                ...           8 years ago
  • 3.5.0                                ...           8 years ago
  • 3.4.1                                ...           8 years ago
  • 3.4.0                                ...           8 years ago
  • 3.3.0                                ...           8 years ago
  • 3.2.1                                ...           8 years ago
  • 3.2.0                                ...           8 years ago
  • 3.1.1                                ...           8 years ago
  • 3.1.0                                ...           8 years ago
  • 3.0.7                                ...           8 years ago
  • 3.0.6                                ...           8 years ago
  • 3.0.5                                ...           8 years ago
  • 3.0.4                                ...           8 years ago
  • 3.0.3                                ...           8 years ago
  • 3.0.2                                ...           8 years ago
  • 3.0.1                                ...           8 years ago
  • 3.0.0                                ...           8 years ago
  • 2.8.0                                ...           8 years ago
  • 2.7.0                                ...           8 years ago
  • 2.6.1                                ...           8 years ago
  • 2.6.0                                ...           9 years ago
  • 2.5.0                                ...           9 years ago
  • 2.4.0                                ...           9 years ago
  • 2.3.0                                ...           9 years ago
  • 2.2.0                                ...           9 years ago
  • 2.1.0                                ...           9 years ago
  • 2.0.1                                ...           9 years ago
  • 2.0.0                                ...           9 years ago
  • 1.4.2                                ...           9 years ago
  • 1.4.1                                ...           9 years ago
  • 1.4.0                                ...           9 years ago
  • 1.3.0                                ...           9 years ago
  • 1.2.0                                ...           9 years ago
  • 1.1.3                                ...           9 years ago
  • 1.1.1                                ...           9 years ago
  • 1.1.0                                ...           9 years ago
  • 1.0.0                                ...           9 years ago
Downloads
Today 0
This Week 0
This Month 51
Last Day 0
Last Week 51
Last Month 0
Dependencies (1)
Dev Dependencies (20)

Copyright 2013 - present © cnpmjs.org | Home |