preact-render-to-string - GitLite

KO | EN

gitlite — search

#ai #typescript #llm #android #machine-learning #rust #deep-learning #docker #nodejs #windows #kubernetes #awesome-list #ios #openai

preact-render-to-string

(★ 724)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- clever-peaches-brush.md
- config.json
- gentle-eyes-trade.md
- README.md
- - has-unpublished-packages.mjs
  - stage-package.mjs
- - ci.yml
  - release.yml
- CODEOWNERS
- - _colors.js
  - color-picker.js
- - benchmark-lite.js
- async.js
- index.js
- stack.js
- text.js
- node-13-exports.js
- node-commonjs.js
- node-verify-exports.js
- - App.jsx
  - entry-client.jsx
  - entry-server.jsx
  - Pokemons.jsx
- index.html
- package-lock.json
- package.json
- vite.config.js
- - chunked.js
  - client.js
  - constants.js
  - polyfills.js
  - util.js
- index.d.ts
- index.js
- internal.d.ts
- jsx.d.ts
- jsx.js
- pretty.js
- stream-node.d.ts
- stream-node.js
- stream.d.ts
- stream.js
- - async.test.jsx
  - index.test.jsx
  - render-chunked.test.jsx
  - stream-node.test.jsx
  - stream.test.jsx
- - index.test.jsx
- - render.test.jsx
- context.test.jsx
- index.test.jsx
- jsx.test.jsx
- pretty.test.jsx
- render.test.jsx
- shallowRender.test.jsx
- utils.jsx
.editorconfig
.gitignore
.oxfmtrc.json
CHANGELOG.md
jsx.d.ts
jsx.js
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
typings.json
vitest.config.ts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/preactjs/preact-render-to-string

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd preact-render-to-string

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install preact preact-render-to-string

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# preact-render-to-string

[![NPM](http://img.shields.io/npm/v/preact-render-to-string.svg)](https://www.npmjs.com/package/preact-render-to-string)
[![Build status](https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml/badge.svg)](https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml)

Render JSX and [Preact](https://github.com/preactjs/preact) components to an HTML string.

Works in Node & the browser, making it useful for universal/isomorphic rendering.

\>\> **[Cute Fox-Related Demo](http://codepen.io/developit/pen/dYZqjE?editors=001)** _(@ CodePen)_ <<

---

### Render JSX/VDOM to HTML

```js
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

```js
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!

```js
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`

```js
import { options } from 'preact';

// Enable error boundaries in `preact-render-to-string`
options.errorBoundaries = true;
```

---

### `Suspense` & `lazy` components with [`preact/compat`](https://www.npmjs.com/package/preact)

```bash
npm install preact preact-render-to-string
```

```jsx
export default () => {
	return <h1>Home page</h1>;
};
```

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

```jsx
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

```jsx
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.

```js
const stream = renderToReadableStream(<App />);
await stream.allReady; // wait for full render
```

#### `renderToPipeableStream` — Node.js Streams

```jsx
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.

---

### License

[MIT](http://choosealicense.com/licenses/mit/)