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

Question

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

Answer 1

假设您在 React Router 4 中使用 Create React App，您需要执行以下步骤:

创建 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/>)将您的应用程序渲染为字符串，然后将其注入(inject) build/index.html , 并根据请求将注入(inject)的 HTML 重新发送到浏览器。

尝试运行您的服务器:node server/index.jsx不起作用，因为节点不理解 JSX。你需要用 babel 设置 webpack 来转译你的 server/index.jsx ，然后使用 node.js 运行转换后的文件。因为您的服务器代码导入 src/App.jsx , 也可以导入 css, svg, png, jpg, etc.文件，您会在运行服务器时遇到很多错误。通过配置您的 webpack 以适应您的用例，一一修复错误。

在客户端上 Hydrate 您的应用程序:成功运行您的服务器后，尝试从浏览器发送请求。您可能会看到一个空白页面，但不要担心，因为我们还没有在服务器上正确呈现。但是，让我们假设您的服务器确实在上面的第 2 步中呈现了某些内容。然后，当您的浏览器接收到 HTML 页面时，它只需要使按钮等交互组件正常工作即可。为此，请编辑文件 src/index.js使用 ReactDOM.hydrate() 而不是 ReactDOM.render()。

在服务器端正确呈现基于路由的内容:在 src/index.js 中继续使用 BrowserRouter ，但在 server/index.js在服务器端，改用 StaticRouter 并将 req.originalUrl 传递给该 StaticRouter。这是因为 BrowserRouter 从您的浏览器地址栏读取地址，但服务器没有地址栏。

在服务器上获取正确数据:服务器端不执行 componentDidMount、comonentDidUpdate 和 useEffect 钩子(Hook)。只会执行 render() 函数。因此，创建 Hook 以在服务器端查询您的数据。

如果要为 CRA 添加 SSR 的建议:

请遵循本指南:https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a

如果您不了解该指南中的任何内容，请从本类(class)中学习:https://www.youtube.com/playlist?list=PLMhLdUN2ZKJ2f-QDFBP1iphsmPd81MQOO