Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

Sign in Demo Install

Sign in Demo Install

preact-render-to-string

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

preact-render-to-string

Render JSX to an HTML string, with support for Preact components.

6.0.3
Source
npm

Version published: 2 years ago

Weekly downloads: 1.6M; increased by7.36%

Maintainers: 11

Weekly downloads

Created: 9 years ago

What is preact-render-to-string?

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.

What are preact-render-to-string's main functionalities?

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 formatting

Other packages similar to preact-render-to-string

preact-render-to-string

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

`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

6.0.3

Patch Changes

#298 6a4b8ed Thanks @shinyama-k! - Fix to add type file for jsx.js

Keywords

FAQs

What is preact-render-to-string?

Is preact-render-to-string popular?

Is preact-render-to-string well maintained?

Package last updated on 01 May 2023

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.

Related posts