• Stars
    star
    574
  • Rank 77,714 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

📄 Universal rendering for Preact: render JSX and Preact components to HTML.

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

More Repositories

1

preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
JavaScript
36,650
star
2

wmr

👩‍🚀 The tiny all-in-one development tool for modern web apps.
JavaScript
4,928
star
3

preact-cli

😺 Your next Preact PWA starts in 30 seconds.
JavaScript
4,685
star
4

signals

Manage state with style in every framework
TypeScript
2,105
star
5

preact-router

🌎 URL router for Preact.
JavaScript
972
star
6

preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
JavaScript
949
star
7

awesome-preact

A curated list of amazingly awesome things regarding Preact ecosystem 🌟
885
star
8

compressed-size-action

GitHub Action that adds compressed size changes to your PRs.
JavaScript
541
star
9

next-plugin-preact

Next.js plugin for preact X
JavaScript
391
star
10

preact-www

📖 Preact documentation website.
JavaScript
358
star
11

preact-custom-element

Wrap your component up as a custom element
JavaScript
356
star
12

prefresh

Hot Module Reloading for Preact
JavaScript
351
star
13

preact-devtools

Browser extension for inspection Preact applications
TypeScript
295
star
14

preset-vite

Preset for using Preact with the vite bundler
TypeScript
256
star
15

eslint-config-preact

Unopinionated baseline ESLint config for Preact and Preact CLI codebases.
JavaScript
85
star
16

enzyme-adapter-preact-pure

Preact adapter for the Enzyme UI testing library
TypeScript
67
star
17

preact-iso

Isomorphic utilities for Preact
JavaScript
55
star
18

preact-ssr-prepass

Drop-in replacement for react-ssr-prepass
JavaScript
47
star
19

create-preact

Create a Vite-powered Preact app in seconds
JavaScript
35
star
20

preact-integrations

A collection of sample apps demonstrating Preact's compatibility with various 3rd party libraries
JavaScript
35
star
21

rfcs

RFCs for changes and ideas in relation to Preact
30
star
22

babel-plugin-transform-replace-expressions

A Babel plugin for replacing expressions with other expressions
JavaScript
23
star
23

jest-preset-preact

Jest preset for testing Preact apps
JavaScript
19
star
24

babel-plugin-transform-rename-properties

A Babel plugin for renaming JavaScript properties
JavaScript
19
star
25

legacy-compat

React 15 compatibility layer for Preact
JavaScript
16
star
26

preact-netlify

Preact's netlify CMS template
JavaScript
15
star
27

playwright-ct

Preact adapter for Playwright Component testing
TypeScript
15
star
28

compat-alias-package

JavaScript
10
star
29

babel-plugin-transform-hook-names

Add custom hook names for devtools
TypeScript
7
star
30

migrate-preact-x

JavaScript
6
star
31

preact-cli-experiment

TypeScript
4
star
32

codesandbox-template

JavaScript
4
star
33

.github

Default community files for the PreactJS organization
3
star