preact-render-to-string
Advanced tools
Render JSX to an HTML string, with support for Preact components.
The preact-render-to-string package is used to render Preact components to HTML strings, which can be used for server-side rendering (SSR), generating static pages, or even testing components by comparing the output string. It is specifically designed for use with the Preact library, which is a fast 3kB alternative to React with the same modern API.
Render Preact components to HTML
This feature allows you to render a Preact component to an HTML string. It is useful for server-side rendering to send the initial HTML to the browser.
import { h } from 'preact';
import renderToString from 'preact-render-to-string';
const MyComponent = () => <div>Hello, World!</div>;
const html = renderToString(<MyComponent />);
console.log(html); // Outputs: <div>Hello, World!</div>Render with JSX
You can use JSX syntax to define the components that you want to render to a string, making it easy to write and understand.
import { h } from 'preact';
import renderToString from 'preact-render-to-string';
const html = renderToString(<div className='example'>Example</div>);
console.log(html); // Outputs: <div class="example">Example</div>Render with options
The package allows you to pass options to the render function, such as 'pretty' for pretty-printed HTML output.
import { h } from 'preact';
import renderToString from 'preact-render-to-string';
const MyComponent = () => <div>Hello, World!</div>;
const html = renderToString(<MyComponent />, { pretty: true });
console.log(html); // Outputs HTML with nice formattingThis package is used for server-side rendering of Vue.js applications. It turns Vue components into HTML strings, similar to what preact-render-to-string does for Preact components. It is tailored to the Vue.js framework and integrates with its reactivity system.
Inferno-server provides methods for server-side rendering of Inferno components. Inferno is another React-like library for building high-performance user interfaces, and inferno-server offers similar functionalities to preact-render-to-string for the Inferno ecosystem.
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/compatnpm 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 (
<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);
});
6.5.10
d80e4dc Thanks @marvinhagemeister! - Allow any value for class + className as long as it's stringified to match browser behavior.FAQs
Render JSX to an HTML string, with support for Preact components.
The npm package preact-render-to-string receives a total of 1,132,023 weekly downloads. As such, preact-render-to-string popularity was classified as popular.
We found that preact-render-to-string demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.