伺服器端渲染

伺服器端渲染（通常簡稱為「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} />