服务器端渲染，服务器端生成

这是一个高级用例，假设您已熟悉 React Flow。如果您是 React Flow 的新手，请查看我们的 入门指南。

在本指南中，您将学习如何配置 React Flow 在服务器上渲染流程，这将使您能够

• 在文档中显示静态 HTML 图表
• 在非 JS 环境中渲染 React Flow 图表
• 动态生成 Open Graph 图片，这些图片在共享指向您流程的链接时会作为嵌入显示

（如果您想下载流程的图片，在我们的 下载图片示例 中，在客户端完成该操作的方法更简单。）

节点尺寸

您需要配置一些内容才能使 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 会检查控制点的 position 并存储该信息以绘制边。由于我们无法在服务器上测量控制点的 position，因此也需要传递此信息。这可以通过节点的 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>