我们如何使用 React Router 4 将客户端渲染 React JS 应用程序转换为服务器端渲染？

Question

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

Answer 1

假设您将 Create React App 与 React Router 4 一起使用，您需要执行以下步骤：

• 创建 SSR 服务器：添加root/server/index.jsx包含 Express 服务器的服务器，提供 CRA 的默认设置，如下所述： https: //create-react-app.dev/docs/deployment#other-solutions
• 在服务器上渲染您的应用程序：在 中导入您的src/App.jsx组件server/index.jsx，用于ReactDOMServer.renderToString(<App/>)将您的应用程序渲染为字符串，然后将其注入到 中build/index.html，并根据请求将注入的 HTML res.send 到浏览器。
• 尝试运行您的服务器：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.enchant() 而不是 ReactDOM.render()。
• 在服务器端正确渲染基于路由的内容：继续在 中使用 BrowserRouter src/index.js，但在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