后端如何使用react
后端集成 React 的方法
在后端服务中集成 React 通常有两种主要场景：服务器端渲染（SSR）或作为静态前端资源的服务端。以下是具体实现方式：
服务器端渲染（SSR）
使用 Node.js 后端框架（如 Express、Koa）配合 React 的 SSR 能力：
-
安装依赖 需要
express、react、react-dom/server等基础包：npm install express react react-dom -
创建 Express 服务
const express = require('express'); const React = require('react'); const { renderToString } = require('react-dom/server'); const app = express(); app.get('/', (req, res) => { const html = renderToString(React.createElement('div', null, 'Hello SSR')); res.send(` <!DOCTYPE html> <html> <body>${html}</body> </html> `); }); app.listen(3000); -
进阶方案 使用 Next.js 等框架简化流程：
npx create-next-app@latest
托管静态构建文件
将 React 构建产物作为静态文件托管：
-
构建 React 项目 在 React 项目中运行：
npm run build -
Express 托管静态文件
const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'build'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); app.listen(3000);
API 数据交互
前后端分离架构下的数据交互方式：
-
创建 API 路由
app.get('/api/data', (req, res) => { res.json({ message: 'Data from backend' }); }); -
React 组件调用 API
useEffect(() => { fetch('/api/data') .then(res => res.json()) .then(data => console.log(data)); }, []);
注意事项
- 跨域问题需配置 CORS 中间件
- 生产环境建议使用 Nginx 反向代理
- SSR 方案需处理数据预取问题
- 静态托管方案需配置客户端路由 fallback
两种方案的选择取决于项目需求：SSR 更适合 SEO 关键场景，静态托管更适合后台管理系统类应用。
