什么是 ssr-create-react-app？
ssr-create-react-app 是一个基于 create-react-app 的插件，它可以将单页 React 应用转化为支持服务器端渲染（SSR）的应用。通过使用 ssr-create-react-app，您可以将您的应用程序优化为更好的性能，更好的搜索引擎优化（SEO），以及更好的访问性（Accessibility）。
如何使用 ssr-create-react-app？
在本教程中，我们将教您如何使用 ssr-create-react-app 将您的单页 React 应用程序转换为支持服务器端渲染的应用程序。首先，我们需要先通过运行以下命令安装 ssr-create-react-app：
npm install -g ssr-create-react-app
安装成功后，我们就可以使用 ssr-create-react-app 命令来创建一个新的支持服务器端渲染的 React 应用程序了。
ssr-create-react-app my-app cd my-app npm start
现在，我们已经成功的创建了一个支持服务器端渲染的 React 应用程序，您可以在浏览器中访问 http://localhost:3000 来查看您的应用程序。
如何进行服务器端渲染？
接下来，我们将教您如何使用 ssr-create-react-app 进行服务器端渲染。首先，我们需要先修改我们的 src/index.js 文件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
export default App;修改后的代码如上所示，我们需要将 App 组件导出，以便我们在服务器端进行渲染。接下来，我们需要创建一个新的 src/server.js 文件：
-- -------------------- ---- -------
------ ------- ---- ----------
------ ----- ---- --------
------ -------------- ---- -------------------
------ --- ---- ----------
----- ------ - ----------
----- ---- - ---------------- -- -----
------------------------------------
--------------- ----- ---- -- -
----------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------- -----------
-------
------
---- ---------------------------------------------- ----------
------- ----------------------------------
-------
-------
---
---
------------------- -- -- -
------------------- ------- -- ---- ----------
---修改后的代码如上所示，我们创建了一个新的 express 服务器，并通过 res.send 方法将我们的应用程序返回给客户端。我们使用 ReactDOMServer.renderToString 方法将我们的应用程序渲染为字符串，并将其插入到 HTML 页面中的 #root 元素中。最后，我们在页面底部引入了我们的打包后的 JavaScript 文件。
接下来，我们需要在我们的 package.json 中添加一个新的脚本，以便我们可以启动我们的服务器。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"ssr": "npm run build && node src/server.js"
},脚本如上所示，我们创建了一个新的 ssr 脚本，它会在我们的 build 后运行服务器。
最后，我们需要运行以下命令：
npm run ssr
现在，我们的服务器已经正常启动了，您可以访问 http://localhost:8080 来查看您的服务器端渲染的应用程序。
结论
通过本教程，您已经学会了如何使用 ssr-create-react-app 将您的单页 React 应用程序转化为支持服务器端渲染的应用程序。服务器端渲染可以显著提高您的应用程序的性能、SEO 和访问性。希望本教程对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcf967216659e244e26