Node.js 集成

相关源文件

• packages/create-react-router/package.json
• packages/react-router-architect/package.json
• packages/react-router-cloudflare/package.json
• packages/react-router-dev/package.json
• packages/react-router-express/package.json
• packages/react-router-fs-routes/package.json
• packages/react-router-node/package.json
• packages/react-router-serve/package.json

本页面介绍了 React Router 的 Node.js 集成功能。 @react-router/node 包为 Node.js 环境中的服务器端渲染 (SSR) 提供了平台抽象，作为各种特定服务器集成的基础。有关 Express 特定集成，请参阅 Express 集成，有关 Cloudflare 特定集成，请参阅 Cloudflare 集成。

架构概述

Node.js 集成层位于 React Router 的核心路由功能和各种服务器平台实现之间，为 Node.js 环境中的 HTTP 请求和响应处理提供了通用抽象。

来源： packages/react-router-node/package.json packages/react-router-express/package.json packages/react-router-serve/package.json packages/react-router-architect/package.json

关键组件

Node.js 集成包含几个关键组件，使 React Router 能够在 Node.js 环境中运行。

来源： packages/react-router-node/package.json

安装与设置

The @react-router/node 包要求 Node.js 20.0.0 或更高版本。可以通过 npm、yarn 或 pnpm 安装。

该包同时提供 CommonJS 和 ESM 版本。

构建类型	导入路径
CommonJS	@react-router/node
ESM	@react-router/node (import)

该包还包含一个可选的安装模块，可用于配置 Node.js 中的全局 fetch API。

来源： packages/react-router-node/package.json15-48

平台抽象

The @react-router/node 包提供了几个平台抽象，以弥合 React Router 的路由系统与 Node.js HTTP 处理之间的差距。

1. Fetch API 实现：使用 @mjackson/node-fetch-server 和 undici 提供与 Node.js 兼容的 Fetch API 实现。
2. Source Map 支持：与 source-map-support 集成，为转译后的代码提供更好的调试体验。
3. Stream 处理：使用 stream-slice 来处理流式响应。

来源： packages/react-router-node/package.json71-75

会话管理

The @react-router/node 包似乎包含会话管理功能，这可以从构建配置中的“sessions”目录看出。这允许在服务器渲染的应用程序中跨请求维护用户状态。

会话功能	描述
基于 Cookie 的会话	通过 HTTP Cookie 存储会话数据
会话创建	创建新会话的 API
会话提交	保存对会话的更改
会话销毁	删除/使会话失效

来源： packages/react-router-node/package.json61

与服务器框架集成

The @react-router/node 包是几个服务器框架集成的基础。

Express 集成

The @react-router/express 包建立在 @react-router/node 的基础上，以实现与 Express.js 的无缝集成。

来源： packages/react-router-express/package.json52

Architect 集成

The @react-router/architect 包支持与 AWS Architect 无服务器框架的集成。

来源： packages/react-router-architect/package.json52-54 packages/react-router-architect/package.json69-70

生产服务器

The @react-router/serve 包提供了一个生产就绪的服务器实现，使用 Express 和 Node.js 集成。

serve 包包含：

• 压缩中间件
• 通过 Morgan 进行日志记录
• Express 服务器
• 端口管理

来源： packages/react-router-serve/package.json38-45

运行时环境要求

Node.js 集成（以及所有相关包）要求 Node.js 版本 20.0.0 或更高版本。此要求确保可以访问现代 JavaScript 功能和 Node.js API。

来源： packages/react-router-node/package.json packages/react-router-express/package.json75-77 packages/react-router-serve/package.json59-61 packages/react-router-architect/package.json78-80

特殊功能

Module-Sync 支持

该包导出的支持“module-sync”条件，适用于需要同步模块解析的环境。

此功能为可能不支持 ESM 语义的环境提供兼容性。

来源： packages/react-router-node/package.json16-30

Source Map 支持

该包包含 Source Map 支持，以便在生产环境中进行更好的调试。

来源： packages/react-router-node/package.json73

与开发工具的关系

The @react-router/dev 包包含了 Node.js 集成作为其依赖项，使其可用于开发工作流程和工具。

来源： packages/react-router-dev/package.json66-76

此集成使开发工具能够利用与生产部署相同的服务器端渲染功能，确保开发与生产环境之间的一致性。