---
title: "在服务器上比较文档"
description: "在服务器上比较 Tiptap 文档。"
canonical_url: "https://tiptap.zhcndoc.com/compare/guides/server-compare"
---

# 在服务器上比较文档

在服务器上比较 Tiptap 文档。

Compare 包无需 Tiptap Editor 实例即可运行。文档比较可以在 [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 或服务器上执行。

首先，创建要比较的两个文档：

```ts
import { Editor } from '@tiptap/core'

const editorA = new Editor()
const docA = editorA.toJSON()

const editorB = new Editor()
const docB = editorB.toJSON()
```

要比较两个文档，Compare 包需要编辑器 schema。要通过网络发送 schema，请先将其序列化：

```ts
import { serializeSchema } from '@tiptap-pro/compare'

const serializedSchema = serializeSchema(editorA.schema)

const response = await fetch('/api/compare', {
  method: 'POST',
  body: JSON.stringify({ docA, docB, schema: serializedSchema }),
})
```

然后在服务器上反序列化 schema，并使用 [`compareDocuments`](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#comparedocuments) 工具比较两个文档。

[`compareDocuments`](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#comparedocuments) 工具会返回一个 [`Changeset`](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#changeset)。`Changeset` 包含两个文档以及描述差异的 `Change` 对象列表。`Changeset` 可以序列化为 JSON，因此你可以将其 JSON 表示存储在数据库中，或发送到客户端显示。

```ts
import { compareDocuments, deserializeSchema } from '@tiptap-pro/compare'

export async function POST(request: Request) {
  const { docA, docB, schema: serializedSchema } = await request.json()
  const schema = deserializeSchema(serializedSchema)
  const changeset = compareDocuments({ schema, docA, docB })
  const changesetJSON = changeset.toJSON()

  return Response.json(changesetJSON)
}
```

Back on the client, you can recover the `Changeset` object and display it.

```ts
import { Editor } from '@tiptap/core'
import { Changeset } from '@tiptap-pro/compare'

// 从服务器响应中获取 changeset
const changesetJSON = await response.json()
const changeset = Changeset.fromJSON(changesetJSON)

// 显示 changeset
const diffEditor = new Editor()
diffEditor.commands.displayChangeset({ changeset })
```

此外，还有一个 [`compareVersions` 工具](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#compareversions)，可以让你在服务器上比较两个版本。

## 性能建议

### 在独立进程中运行文档比较

比较大型文档的计算成本较高。此外，文档比较是同步过程，运行期间会阻塞事件循环。因此，请避免在客户端或服务器的主线程中运行文档比较，而应在独立进程中运行：

- 在客户端使用 [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)。
- 在服务器上使用 [worker thread](https://nodejs.org/api/worker_threads.html)，或使用带 worker 池的消息队列。

### 缓存差异结果

`compareDocuments` 工具会返回 [`Changeset`](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#changeset)。`Changeset` 是可序列化为 JSON 的对象，可以缓存。如果应用经常比较两个文档，请缓存 `Changeset`，避免重复比较。

以上建议同样适用于 [`compareVersions`](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#compareversions) 等其他比较 API。