サーバーサイドレンダリング、サーバーサイド生成

これは高度なユースケースであり、React Flowをすでに使い慣れていることを前提としています。React Flowを初めて使用する場合は、はじめにガイドを確認してください。

このガイドでは、サーバー上でフローをレンダリングするようにReact Flowを設定する方法を学びます。これにより、以下のことが可能になります。

• ドキュメントに静的なHTML図を表示する
• 非JS環境でReact Flow図をレンダリングする
• フローへのリンクを共有するときに埋め込みとして表示されるopengraph画像を動的に生成する

(フローの画像をダウンロードしたい場合は、クライアント側でより簡単な方法があります。ダウンロード画像例をご覧ください。)

ノードの寸法

React Flowをサーバー上で動作させるには、いくつかの設定が必要です。最も重要なのはノードの寸法です。React Flowは、幅と高さがある場合にのみノードをレンダリングします。通常、特定のwidthおよびheightを指定せずにノードを渡すと、それらが測定され、寸法がmeasured.widthおよびmeasured.heightに書き込まれます。サーバー上で寸法を測定できないため、明示的に渡す必要があります。これは、widthとheight、またはinitialWidthとinitialHeightのノードプロパティを使用して行うことができます。

const nodes = [
  {
    id: '1',
    type: 'default',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1' },
    width: 100,
    height: 50,
  },
];

React Flowはノードの寸法を認識し、サーバー上でレンダリングできます。widthとheightプロパティは、ノードのインラインスタイルとして使用されます。クライアント上でノードの寸法が異なる場合や、寸法がコンテンツに基づいて動的である必要がある場合は、initialWidthとinitialHeightプロパティを使用できます。これらは、ノードが測定されず、measured.widthとmeasured.heightが設定されていない限り、(サーバー上またはクライアント上で)最初のレンダリングでのみ使用されます。

ハンドルの位置

サーバー上でエッジもレンダリングしたい場合もあるでしょう。クライアントでは、React Flowはハンドルの位置をチェックし、エッジを描画するための情報を保存します。サーバー上でハンドルの位置を測定できないため、この情報も渡す必要があります。これは、ノードのhandlesプロパティを使用して行うことができます。

const nodes: Node[] = [
  {
    id: '1',
    type: 'default',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1' },
    width: 100,
    height: 50,
    handles: [
      {
        type: 'target',
        position: Position.Top,
        x: 100 / 2,
        y: 0,
      },
      {
        type: 'source',
        position: Position.Bottom,
        x: 100 / 2,
        y: 50,
      },
    ],
  },
];

この追加情報により、React Flowはサーバー上でエッジをレンダリングするのに十分な情報を把握できます。ノードのみをレンダリングするだけでよい場合は、この手順をスキップできます。

サーバーでのfitViewの使用

React Flowコンテナ自体の寸法がわかっている場合は、サーバー上でfitViewを使用することもできます。このためには、コンテナのwidthとheightをReactFlowコンポーネントに渡す必要があります。

<ReactFlow nodes={nodes} edges={edges} fitView width={1000} height={500} />

これにより、ビューポートが計算され、すべてのノードをビューポートに含めるために、サーバー上でtransformが設定されます。

<ReactFlowProvider>との使用

ReactFlowProviderを使用している場合は、initialNodes、initialEdges、オプションのラッパー寸法(initialWidthおよびinitialHeight)、およびfitViewをプロバイダーに渡すことができます。

<ReactFlowProvider
  initialNodes={nodes}
  initialEdges={edges}
  initialWidth={1000}
  initialHeight={500}
  fitView
>
  <App />
</ReactFlowProvider>