react 服务器端渲染_在自定义服务器端渲染的React App中启用热模块替换的循序渐进指南

react 服务器端渲染

Requirement —

要求—

1. Pages should be initially rendered at server side using some templating engine like EJS and some initial data injected into the page by the server.
   首先应使用诸如EJS之类的模板引擎在服务器端呈现页面，并由服务器将一些初始数据注入到页面中。
2. Express should be used as the web server, along with all the backend logic, and use that to render the views on initial page load.
   Express应该与所有后端逻辑一起用作Web服务器，并使用它在初始页面加载时呈现视图。

3. React code should be separated, and whenever changes are made to react components code/css, ui should be updated on the fly, without refreshing the page. read more about HMR

   应将React代码分开，并且每当对React组件代码/ css进行更改时，都应在不刷新页面的情况下即时更新ui。 阅读有关HMR的更多信息

依存关系 (Dependencies)

ejs: used for server side templatingexpress: our serverreact, react-dom: for rendering react components

ejs：用于服务器端模板表达：我们的服务器React，react-dom：用于渲染React组件

Dev DependenciesBabel stuff: to transpile our JSX to javascriptloaders: loaders for webpack to resolve different module types.@pmmmwh/react-refresh-webpack-plugin: webpack plugin to enable HMR for react components, without loosing state.webpack stuff: to bundle our app and enable hot module replacement.

开发依赖关系 Babel的东西：将我们的JSX转换为javascript 加载器：用于webpack的加载器以解析不同的模块类型。 @ pmmmwh / react-refresh-webpack-plugin： webpack插件，用于为响应组件启用HMR，而不会丢失状态。 webpack内容：捆绑我们的应用程序并启用热模块替换。

Webpack配置 (Webpack Config)

Nothing much different here. Webpack config is same as you would use for client side rendered app, powered by webpack dev server. Make sure that the entry points to the index.js where you have rendered your react root using ReactDOM.render

这里没什么不同。 Webpack配置与您将用于由Webpack开发服务器支持的客户端呈现的应用程序相同。 确保入口点index.js，你有你的呈现使用ReactDOM.renderReact根

客户端React代码- (Client Side react code —)

Nothing different here too. Just normal client side react code.

这里也没什么不同。 只是普通的客户端React代码。

服务器端代码 (Server Side code)

This is the interesting part. The problem in hot reloading a server side rendered app is that we have no way to connect it to the webpack-dev-server which enables HMR! because we are running it inside an express server, which knows nothing about webpack. here comes to our rescue webpack-dev-middleware and webpack-hot-middleware. These middlewares stick to the express app and enable the hot reloading.

这是有趣的部分。 热加载服务器端渲染的应用程序时的问题是，我们无法将其连接到启用HMR的webpack-dev-server！ 因为我们在快递服务器中运行它，而快递服务器对webpack一无所知。 这是我们的救援webpack-dev-middleware和webpack-hot-middleware。 这些中间件坚持使用Express应用程序并启用热重装。

Notice line 3–5 and 12–16. We import these modules and put them as normal middlewares of express. Also note that we pass the webpack config as argument to webpack [line 8] and then pass the compiler instance to these middlewares. [lines 12 and 16]server.js

注意第3–5和12–16行。 我们导入这些模块，并将其作为express的常规中间件。 还要注意，我们将webpack config作为参数传递给webpack [ 第8行 ]，然后将编译器实例传递给这些中间件。 [ 第12和16行 ] server.js

a sample view

样本视图

notice on line 49, we include the bundle.js. This will be updated by webpack using the setup we did. Rest of the code is rendered server side. We can put whatever logic we want here. Notice line 41 and 44. These are dynamic values injected into ejs view by express server. See line 20 in server.js above. These can be any data processed or fetched at server side and injected into the ejs view. We can also use this data to hydrate the initial state of redux store. Say to validate the cookie and authenticate the user etc. We can also use this to optimize the critical rendering path, say inlining css for above the fold content, rendering above the fold content etc.

注意，在第49行，我们包含bundle.js 。 这将由webpack使用我们所做的设置进行更新。 其余代码呈现在服务器端。 我们可以在此处放置任何逻辑。 注意第41和44行 。 这些是快递服务器注入到ejs视图中的动态值。 请参阅上面的server.js中的第20行。 这些可以是在服务器端处理或提取并注入到ejs视图中的任何数据。 我们还可以使用这些数据来水化Redux存储的初始状态。 说验证Cookie并验证用户身份等。我们还可以使用它来优化关键的渲染路径，例如在折叠内容上方内联css，在折叠内容上方进行内联cs等。

Thats it. You are good to go. Just run node index.js and your app should be up and running with hot module replacement enabled.

而已。 你已准备好出发。 只需运行node index.js ，您的应用应已启动并运行，并且启用了热模块替换。

The complete code is available at https://github.com/ktajpuri/ssr-hot-reloading.

完整的代码可从https://github.com/ktajpuri/ssr-hot-reloading获得 。

Feel free to ask any questions in comments.

随时在评论中提问。

翻译自: https://medium.com/@ktajpuri/step-by-step-guide-to-enable-hot-module-replacement-in-a-custom-server-side-rendered-react-app-cb9be0c0747e

react 服务器端渲染