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

¥Server side rendering, server side generation

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

¥This is an advanced use case and assumes you are already familiar with React Flow. If you’re new to React Flow, check out our getting started guide.

在本指南中，你将学习如何配置 React Flow 以在服务器上渲染流程，这将允许你

¥In this guide you will learn how to configure React Flow to render a flow on the server, which will allow you to

• 在文档中显示静态 HTML 图表

  ¥Display static HTML diagrams in documentation

• 在非 js 环境中渲染 React Flow 图

  ¥Render React Flow diagrams in non-js environments

• 动态生成开放图形图片，这些图片在共享指向你的流程的链接时显示为嵌入

  ¥Dynamically generate open graph images that appear as embeds when sharing a link to your flow

（如果你想下载流程的图片，在我们的 下载图片示例 中有一种更简单的方法可以在客户端执行此操作。）

¥(If you want to download an image of your flow, there’s an easier way to do that on the client-side in our download image example.)

节点尺寸

¥Node dimensions

你需要配置一些东西才能使 React Flow 在服务器上工作，最重要的是节点尺寸。React Flow 仅渲染具有宽度和高度的节点。通常，你传递的节点没有特定的 width 和 height，然后对它们进行测量，并将尺寸写入 measured.width 和 measured.height。由于我们无法在服务器上测量尺寸，因此我们需要明确传递它们。这可以通过 width 和 height 或 initialWidth 和 initialHeight 节点属性来完成。

¥You need to configure a few things to make React Flow work on the server, the most important being the node dimensions. React Flow only renders nodes if they have a width and height. Usually you pass nodes without a specific width and height, they are then measured and the dimensions get written to measured.width and measured.height. Since we can’t measure the dimensions on the server, we need to pass them explicitly. This can be done with the width and height or the initialWidth and initialHeight node properties.

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 now knows the dimensions of the node and can render it on the server. The width and height properties are used as an inline style for the node. If you expect nodes to have different dimensions on the client or if the dimensions should by dynamic based on the content, you can use the initialWidth and initialHeight properties. They are only used for the first render (on the server or on the client) as long as the nodes are not measured and measured.width and measured.height are not set.

句柄位置

¥Handle positions

你可能还想在服务器上渲染边缘。在客户端，React Flow 检查句柄的位置并存储该信息以绘制边。由于我们无法在服务器上测量句柄的位置，因此我们也需要传递此信息。这可以通过节点的 handles 属性来完成。

¥You probably also want to render the edges on the server. On the client, React Flow checks the positions of the handles and stores that information to draw the edges. Since we can’t measure the handle positions on the server, we need to pass this information, too. This can be done with the handles property of a node.

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 就足够了解句柄，可以在服务器上渲染边。如果你只对渲染节点感到满意，则可以跳过此步骤。

¥With this additional information, React Flow knows enough about the handles to render the edges on the server. If you are fine with just rendering the nodes, you can skip this step.

在服务器

¥Using fitView on the server

如果你知道 React Flow 容器本身的尺寸，你甚至可以在服务器上使用 fitView。为此，你需要将容器的 width 和 height 传递给 ReactFlow 组件。

¥If you know the dimensions of the React Flow container itself, you can even use fitView on the server. For this, you need to pass the width and height of the container to the ReactFlow component.

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

这将计算视口并在服务器上设置 transform，以便将所有节点包含在视口中。

¥This will calculate the viewport and set the transform on the server in order to include all nodes in the viewport.

与 <ReactFlowProvider> 一起使用

¥Usage with the <ReactFlowProvider>

如果你使用的是 ReactFlowProvider，则可以将 initialNodes、initialEdges 和可选封装器尺寸（initialWidth 和 initialHeight）和 fitView 传递给提供程序。

¥If you are using the ReactFlowProvider, you can pass initialNodes, initialEdges and optional wrapper dimensions (initialWidth and initialHeight) and fitView to the provider.

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