服务器端渲染

服务器端渲染（通常缩写为“SSR”）允许您将应用程序渲染为 HTML 字符串，该字符串可以发送到客户端以改善加载时间。除此之外，还有其他场景（如测试），其中 SSR 被证明非常有用。

安装

Preact 的服务器端渲染器位于其自己的存储库中，可以通过您选择的打包器进行安装

npm install -S preact-render-to-string

在上述命令完成后，我们可以立即开始使用它。API 表面相当小，可以通过一个简单的片段最好地解释

import render from 'preact-render-to-string';
import { h } from 'preact';

const App = <div class="foo">content</div>;

console.log(render(App));
// <div class="foo">content</div>

浅层渲染

出于某些目的，通常最好不渲染整个树，而只渲染一层。为此，我们有一个浅层渲染器，它将以名称而不是返回值打印子组件。

import { shallow } from 'preact-render-to-string';
import { h } from 'preact';

const Foo = () => <div>foo</div>;
const App = <div class="foo"><Foo /></div>;

console.log(shallow(App));
// <div class="foo"><Foo /></div>

漂亮模式

如果您需要以更人性化的方式获取渲染输出，我们为您提供了保障！通过传递 pretty 选项，我们将保留空格并按预期缩进输出。

import render from 'preact-render-to-string/jsx';
import { h } from 'preact';

const Foo = () => <div>foo</div>;
const App = <div class="foo"><Foo /></div>;

console.log(render(App, {}, { pretty: true }));
// Logs:
// <div class="foo">
//   <div>foo</div>
// </div>

JSX 模式

如果您正在进行任何类型的快照测试，JSX 渲染模式特别有用。它将输出渲染为 JSX 中编写的形式。

import render from 'preact-render-to-string/jsx';
import { h } from 'preact';

const App = <div data-foo={true} />;

console.log(render(App));
// Logs: <div data-foo={true} />