サーバーサイドレンダリング

サーバーサイドレンダリング（しばしば「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>

シャローレンダリング

一部の目的では、ツリー全体をレンダリングするのではなく、1つのレベルのみをレンダリングすることが望ましい場合があります。そのため、子コンポーネントの戻り値ではなく、名前で出力するシャローレンダラーがあります。

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} />