随着客户端渲染框架的普及，React 自然也成为了前端领域中的热门技术之一。然而，在某些情况下，仅仅依靠客户端渲染已经无法满足需求，这时候就需要使用 React 同构技术。React 同构技术使得应用可以在服务端进行渲染，以解决浏览器加载速度慢、SEO 不友好等问题。
在本文中，我们将介绍如何实现 React 同构。内容涵盖 SSR 实现、前后端交互、SEO 优化等方面，旨在深入探讨 React 同构技术并提供指导意义。
SSR 实现
服务端渲染是 React 同构的基础，所以我们需要先实现 SSR。
服务端渲染原理
SSR 顾名思义就是在服务端渲染页面。当用户在浏览器中访问一个页面时，服务器会根据请求的 URL 地址，构建一个虚拟的浏览器环境，然后在这个虚拟的环境中运行相应的代码，最终生成完整的 HTML 界面返回给客户端。
实现方法
React 中通过 ReactDOMServer.renderToString 方法来实现 SSR。需要注意的是，在服务端渲染时，需要使用 ReactDOMServer.hydrate 而不是 ReactDOM.render 来将服务端渲染出的 HTML 变成可交互的网页。
下面是一个实现过程的示例代码：
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';
const express = require('express');
const app = express();
// 处理静态文件
app.use(express.static('public'));
app.get('/', (req, res) => {
const content = ReactDOMServer.renderToString(<App />);
const html = `
<html>
<head>
<title>React SSR</title>
</head>
<body>
<div id="root">${content}</div>
<script src="/bundle.js"></script>
</body>
</html>
`;
res.send(html);
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});前后端交互
在服务端渲染的基础上，我们需要进一步实现前后端交互，使得页面中的组件能够与后台进行交互。
实现方法
React 中提供了一个兼容前后端的接口：React 16 提供了 React.createRoot API，它返回一个类似 ReactDOM.render 的根实例。React 18 则引入了 hydrateRoot API。
我们可以使用 axios 进行前后端数据传输，并使用 useContext 和 useReducer 等 React Hook 进行状态管理。以下是一个实现节点评论列表的示例代码：
import React, { useState, useEffect, useContext, useReducer } from 'react';
import axios from 'axios';
const CommentContext = React.createContext();
function reducer(state, action) {
switch (action.type) {
case 'addComment':
return [...state, action.payload];
case 'removeComment':
return state.filter((item) => item.id !== action.payload);
default:
throw new Error();
}
}
function CommentList() {
const { state, dispatch } = useContext(CommentContext);
return (
<div>
{state.map((item) => (
<div key={item.id}>
<h3>{item.title}</h3>
<p>{item.content}</p>
<button onClick={() => dispatch({ type: 'removeComment', payload: item.id })}>删除</button>
</div>
))}
</div>
);
}
function CommentForm() {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const { dispatch } = useContext(CommentContext);
const handleSubmit = (event) => {
event.preventDefault();
axios.post('/api/comments', { title, content }).then((res) => {
dispatch({ type: 'addComment', payload: res.data });
setTitle('');
setContent('');
});
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
<textarea value={content} onChange={(e) => setContent(e.target.value)} />
<button type="submit">提交</button>
</form>
);
}
function CommentBox(props) {
const [state, dispatch] = useReducer(reducer, props.comments);
return (
<CommentContext.Provider value={{ state, dispatch }}>
<CommentList />
<CommentForm />
</CommentContext.Provider>
);
}
export default CommentBox;SEO 优化
我们已经实现了 SSR 和前后端交互，下面我们需要进一步进行 SEO 优化。
SEO 优化原理
搜索引擎爬虫程序只能够抓取 HTML 中的内容，无法获取通过 JavaScript 生成的内容。因此，为了优化 SEO，我们需要将组件中的内容渲染到 HTML 中。
实现方法
我们可以使用 Helmet 库进行 SEO 优化。Helmet 可以帮助我们在 HTML 中添加各种标签，例如 title、meta、link 等。
以下是一个实现 SEO 优化的示例代码：
import React, { Fragment } from 'react';
import { Helmet } from 'react-helmet';
function Page() {
return (
<Fragment>
<Helmet>
<title>Page Title</title>
<meta name="description" content="Page Description" />
<link rel="canonical" href="https://example.com/page" />
</Helmet>
<div>Page Content</div>
</Fragment>
);
}
export default Page;总结
本文介绍了如何实现 React 同构，内容包括 SSR 实现、前后端交互、SEO 优化等方面。在实际开发中，我们需要针对具体应用场景进行调整和优化，以达到更好的性能和用户体验。
希望本文对你有所帮助，谢谢阅读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f966aadd4f0e0ff8261a2