什么是服务器端渲染（SSR）？
服务器端渲染（SSR）是一种将网页内容在服务器上动态生成并发送给浏览器的技术。传统的客户端渲染（CSR）是在浏览器上通过执行JavaScript来渲染页面。而SSR在服务器上将组件转换为HTML字符串，然后将其发送到浏览器。这种方法有几个优点，包括更好的SEO、更快的首次加载时间和更好的性能。
React与服务器端渲染
React本身是为客户端渲染设计的，但是它也支持服务器端渲染。使用React进行服务器端渲染可以带来很多好处。首先，搜索引擎爬虫可以直接获取到完全渲染的HTML内容，从而提高SEO。其次，用户可以更快地看到完整的页面内容，无需等待客户端渲染完成。最后，服务器端渲染可以减轻客户端的负担，提高整体性能和用户体验。
基于React的服务器端渲染实践
下面是一个基于React的服务器端渲染实践的示例。
创建React组件
首先，我们需要创建一个React组件，在服务器端和客户端都可以使用。例如，我们创建一个简单的"HelloWorld"组件：
import React from 'react';
const HelloWorld = () => {
return <h1>Hello, World!</h1>;
}
export default HelloWorld;
Express服务器配置
接下来，我们需要配置一个Express服务器来处理HTTP请求，并使用React组件进行服务器端渲染。
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import HelloWorld from './HelloWorld';
const app = express();
app.get('/', (req, res) => {
const html = renderToString(<HelloWorld />);
res.send(`
<html>
<head>
<title>Server-side Rendering</title>
</head>
<body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is listening on port 3000');
});
在上面的代码中，我们首先导入了renderToString函数，它可以将React组件转换为HTML字符串。然后，在Express的根路由上，我们使用renderToString函数将<HelloWorld />组件转换为HTML字符串，并将其插入到<div id="root">中。最后，我们将bundle.js文件加载到HTML页面中，bundle.js是客户端渲染所需的JavaScript文件。
客户端渲染
最后，我们需要为客户端渲染准备一个入口文件，用于将React组件挂载到DOM上。
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.hydrate(<HelloWorld />, document.getElementById('root'));
在上述代码中，我们使用ReactDOM.hydrate方法来挂载React组件。它与ReactDOM.render方法类似，但是它会尽力去保留已经存在的DOM节点的状态，从而提高性能和可访问性。
构建和启动应用程序
最后，我们需要构建和启动我们的应用程序。假设我们已经使用Webpack将上述代码打包为一个bundle.js文件，并将其输出到dist目录中，我们可以使用以下命令来启动应用程序：
node dist/server.js
现在，我们的基于React的服务器端渲染应用程序已经启动，我们可以在浏览器中访问它，并查看服务器端渲染的效果。
结论
通过基于React的服务器端渲染，我们可以提供更好的SEO、更快的首次加载时间和更好的性能。虽然设置服务器端渲染可能需要一些额外的工作，但是考虑到它的许多优势，它通常是值得的。
本文来自极简博客，作者：温暖如初，转载请注明原文链接：基于React的服务器端渲染实践
