As a frontend project, preactjs/preact-render-to-string has picked up 725 stars on GitHub (JavaScript). π Universal rendering for Preact: render JSX and Preact components to HTML.
Snapshot summary built from the project's own GitHub metadata β there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then β see the READ ME tab for the original README in full.
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;
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);
});
Streaming
[!NOTE]
This is an early version of our streaming implementation.
Preact supports streaming HTML to the client incrementally, flushing <Suspense> fallbacks immediately and replacing them with the resolved content as data arrives. This reduces Time to First Byte and allows the browser to start parsing earlier.
renderToReadableStream β Web Streams
import { renderToReadableStream } from 'preact-render-to-string/stream';
import { Suspense, lazy } from 'preact/compat';
const Profile = lazy(() => import('./Profile'));
const App = () => (
<html>
<head><title>My App</title></head>
<body>
<Suspense fallback={<p>Loading profileβ¦</p>}>
<Profile />
</Suspense>
</body>
</html>
);
// Works in any Web Streams environment (Deno, Bun, Cloudflare Workers, β¦)
export default {
fetch() {
const stream = renderToReadableStream(<App />);
// stream.allReady resolves once all suspended content has been flushed
return new Response(stream, {
headers: { 'Content-Type': 'text/html' }
});
}
};
The returned ReadableStream has an extra allReady: Promise<void> property that resolves once every suspended subtree has been written. Await it before sending the response if you need the complete document before anything is flushed (e.g. for static export). At which point you might be better off using renderToStringAsync though.
const stream = renderToReadableStream(<App />);
await stream.allReady; // wait for full render
renderToPipeableStream β Node.js Streams
import { createServer } from 'node:http';
import { renderToPipeableStream } from 'preact-render-to-string/stream-node';
import { Suspense, lazy } from 'preact/compat';
const Profile = lazy(() => import('./Profile'));
const App = () => (
<html>
<head><title>My App</title></head>
<body>
<Suspense fallback={<p>Loading profileβ¦</p>}>
<Profile />
</Suspense>
</body>
</html>
);
createServer((req, res) => {
res.setHeader('Content-Type', 'text/html');
const { pipe, abort } = renderToPipeableStream(<App />, {
onShellReady() {
// Called once the synchronous shell is ready to stream.
pipe(res);
},
onAllReady() {
// Called once every suspended subtree has been flushed.
},
onError(error) {
console.error(error);
res.statusCode = 500;
}
});
// Optional: abort the render after a timeout
setTimeout(abort, 10_000);
}).listen(8080);
Option
Description
onShellReady()
Called synchronously once the initial shell has been rendered and streaming is about to start. Pipe here for fastest TTFB.
onAllReady()
Called after all <Suspense> boundaries have resolved and the stream is complete.
onError(error)
Called for render errors inside suspended subtrees.
Calling abort() stops the render and destroys the stream; any pending suspended subtrees are dropped.
How active is development on preactjs/preact-render-to-string?
The most recent commit recorded on preactjs/preact-render-to-string was 8 days ago, based on the GitHub push timestamp. The repository has 101 forks β one of the better signals of community interest.
How many stars does preactjs/preact-render-to-string have?
preactjs/preact-render-to-string has 725 GitHub stars β refresh the page for the live number, or check github.com/preactjs/preact-render-to-string. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
What language is preactjs/preact-render-to-string written in?
preactjs/preact-render-to-string is written primarily in JavaScript. GitHub's language field is based on the largest share of bytes in the default branch.
What license does preactjs/preact-render-to-string use?
preactjs/preact-render-to-string is released under the MIT license. Always verify the LICENSE file directly on GitHub for the authoritative terms β license strings can be edited out of sync with a project's actual stance.
What topics is preactjs/preact-render-to-string associated with?
GitHub's repository topics for preactjs/preact-render-to-string: "html", "preact", "preact-components", "universal". TopGit's editorial category is Frontend.
Where can I see preactjs/preact-render-to-string in action?
The project maintains a homepage at http://npm.im/preact-render-to-string. The README tab on this page also usually contains screenshots and a quickstart.
Where do I read more about preactjs/preact-render-to-string?
This TopGit page is a snapshot β the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/preactjs/preact-render-to-string is the definitive source.
Read full README in the tab above.
Still deciding about preact-render-to-string?
One click hands the question to an AI along with this page β see what it says about preact-render-to-string.
/preact-render-to-string
