react如何后端渲染
React 后端渲染（SSR）实现方法
React 的后端渲染（Server-Side Rendering，SSR）主要通过服务端生成 HTML 字符串，再发送给客户端。以下是几种常见实现方式：
使用 Node.js 和 Express
安装必要依赖：
npm install express react react-dom @babel/core @babel/preset-env @babel/preset-react创建服务端入口文件：
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
const app = express();
app.get('*', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head><title>SSR Example</title></head>
<body>
<div id="root">${html}</div>
<script src="/client.js"></script>
</body>
</html>
`);
});
app.listen(3000);使用 Next.js 框架
Next.js 是 React 的 SSR 框架，内置完善解决方案：
创建页面文件 pages/index.js：
function HomePage() {
return <div>Welcome to Next.js!</div>;
}
export default HomePage;启动开发服务器：
npx next dev使用 Razzle 工具
Razzle 是通用 SSR 启动工具：
创建项目：
npx create-razzle-app my-app修改服务端渲染逻辑：
// server.js
import { renderToString } from 'react-dom/server';
import App from './App';
const markup = renderToString(<App />);处理数据获取
对于需要异步数据的组件：
// 组件中定义静态方法
class MyComponent extends React.Component {
static async getInitialProps({ req }) {
const data = await fetchData();
return { data };
}
}客户端注水（Hydration）
确保客户端能接管交互：
import { hydrate } from 'react-dom';
hydrate(<App />, document.getElementById('root'));静态生成（SSG）
结合静态生成提升性能：
// Next.js 示例
export async function getStaticProps() {
return { props: {} };
}关键点在于服务端生成完整 HTML，客户端通过 hydration 激活交互功能。现代框架如 Next.js 已封装大部分复杂逻辑，推荐优先采用。
