preact-render-to-string
Advanced tools
Package description
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 is the official React package for rendering components to static markup, typically used on the server. It is similar to preact-render-to-string but is designed for React instead of Preact. It offers a larger API surface and is part of the larger React ecosystem.
This 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.
Changelog
6.2.1
a331699 Thanks @marvinhagemeister! - Fix incorrect casing of HTML attributes and SVG attributes017a8bb Thanks @marvinhagemeister! - Fix casing of namespaced attribute namesReadme
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/compat & preact-ssr-prepassnpm 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);
});
FAQs
Unknown package
The npm package preact-render-to-string receives a total of 927,508 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 8 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
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.