我们如何使用 react router 4 将客户端渲染 react js 应用程序转换为服务器端渲染？

如何解决我们如何使用 react router 4 将客户端渲染 react js 应用程序转换为服务器端渲染？

我们如何使用 react-router 4 将客户端渲染 react js 应用程序转换为服务器端渲染？

解决方法

假设您使用带有 React Router 4 的 Create React App，您需要执行以下步骤：

• 创建 SSR 服务器：添加包含 Express 服务器的 root/server/index.jsx，为 CRA 的默认设置提供服务，如下所述：https://create-react-app.dev/docs/deployment#other-solutions
• 在服务器上呈现您的应用程序：在您的 src/App.jsx 中导入您的 server/index.jsx 组件，使用 ReactDOMServer.renderToString(<App/>) 将您的应用程序呈现为一个字符串，然后将其注入到 build/index.html 中，并根据请求将注入的 HTML 重新发送到浏览器。
• 尝试运行您的服务器：node server/index.jsx 不起作用，因为节点不理解 JSX。您需要使用 babel 设置 webpack 来转译您的 server/index.jsx，然后使用 node.js 运行转译后的文件。因为您的服务器代码导入了 src/App.jsx，它也可能导入了 css,svg,png,jpg,etc. 文件，所以您在运行服务器时会遇到很多错误。通过配置您的 webpack 以适应您的用例，一一修复错误。
• 在客户端为您的应用程序加水：成功运行您的服务器后，尝试从浏览器发送请求。您可能会看到一个空白页面，但不要担心，因为我们还没有在服务器上正确呈现。但是，让我们假设您的服务器确实在上面的第 2 步中呈现了某些内容。然后，当您的浏览器接收到 HTML 页面时，它只需要使按钮等交互组件正常工作即可。为此，请编辑文件 src/index.js 以使用 ReactDOM.hydrate() 而不是 ReactDOM.render()。
• 在服务器端正确渲染基于路由的内容：在 src/index.js 中继续使用 BrowserRouter，但在服务器端的 server/index.js 中，改用 StaticRouter 并将 req.originalUrl 传递给该 StaticRouter。这是因为 BrowserRouter 从您的浏览器地址栏读取地址，但服务器没有地址栏。
• 在服务器上获取正确的数据：服务器端不执行 componentDidMount、comonentDidUpdate 和 useEffect 钩子。只会执行 render() 函数。因此，创建挂钩以在服务器端查询您的数据。

如果您想为 CRA 添加 SSR 的建议：

• 遵循本指南：https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a
• 如果您不了解该指南中的任何内容，请学习本课程：https://www.youtube.com/playlist?list=PLMhLdUN2ZKJ2f-QDFBP1iphsmPd81MQOO