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

🌐 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 图表
• 在非 js 环境中渲染 React Flow 图
• 动态生成开放图形图片，这些图片在共享指向你的流程的链接时显示为嵌入

（如果你想下载你的流程图片，在客户端有一个更简单的方法可以做到，请参考我们的下载图片示例。）

节点尺寸

🌐 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.

在服务器上使用 fitView

🌐 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>

initial- 前缀意味着这些值仅用于第一次渲染。之后，提供者将使用上下文中的 nodes 和 edges。

🌐 The initial- prefix means that these values are only used for the first render. After that, the provider will use the nodes and edges from the context.

创建静态 HTML

🌐 Creating static HTML

如果你想创建静态 HTML，可以使用 React 的 renderToStaticMarkup 函数。这将把 React Flow 组件渲染为 HTML 字符串。然后你可以使用这个字符串来创建静态 HTML 文件，或者将其作为对 HTTP 请求的响应发送。

🌐 If you want to create static HTML, you can use the renderToStaticMarkup function from React. This will render the React Flow component to a string of HTML. You can then use this string to create a static HTML file or send it as a response to an HTTP request.

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { ReactFlow, Background } from '@xyflow/react';
 
function toHTML({ nodes, edges, width, height }) {
  const html = renderToStaticMarkup(
    React.createElement(
      ReactFlow,
      {
        nodes,
        edges,
        width,
        height,
        minZoom: 0.2,
        fitView: true,
      },
      React.createElement(Background, null),
    ),
  );
 
  return html;
}