Javascript 如何在Webpack2中使用HMR实现React服务器端渲染?
我正在尝试使用使用HMR的react应用程序实现服务器端渲染,需要对我的问题进行澄清。服务器和前端之间似乎存在通信错误,但我不完全确定原因 当我启动服务器时,浏览器加载客户端index.html,我可以编辑我的站点,HMR工作正常。但是,当我导航到主页之外的另一个页面并刷新浏览器时,服务器会在我的handleRender函数中呈现html标记。出现站点html标记,但是没有css,HMR不起作用 总之,在第一次加载时,它呈现应用程序客户端,但在刷新时,它呈现应用程序服务器端。我想这可能与我使用路由器的方式有关代码>但我不确定。任何澄清都会有帮助 客户端索引.htmlJavascript 如何在Webpack2中使用HMR实现React服务器端渲染?,javascript,reactjs,express,webpack,react-router,Javascript,Reactjs,Express,Webpack,React Router,我正在尝试使用使用HMR的react应用程序实现服务器端渲染,需要对我的问题进行澄清。服务器和前端之间似乎存在通信错误,但我不完全确定原因 当我启动服务器时,浏览器加载客户端index.html,我可以编辑我的站点,HMR工作正常。但是,当我导航到主页之外的另一个页面并刷新浏览器时,服务器会在我的handleRender函数中呈现html标记。出现站点html标记,但是没有css,HMR不起作用 总之,在第一次加载时,它呈现应用程序客户端,但在刷新时,它呈现应用程序服务器端。我想这可能与我使用路
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Base Template</title>
<link rel="stylesheet" type="text/css" href="/static/bundle.css">
</head>
<body id="body">
<div class="root"></div>
<script src="/static/bundle.js"></script>
</body>
</html>
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
const root = document.querySelector('.root');
// Wraps our App in AppContainer
const render = (Component) => {
ReactDOM.render(
<BrowserRouter>
<AppContainer>
<Component/>
</AppContainer>
</BrowserRouter>,
root
);
};
// Renders our application
render(App);
// Checks if there have been changes and accepts them.
// This activates HMR and refreshes modules in the browser
if (module.hot) {
module.hot.accept();
}
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router'
import { resolve } from 'path'
import routes from './routes'
// Imports our React App
import App from '../client/scripts/App'
// Create Express App
const app = express();
// Set the port for our server
app.set('port', process.env.PORT || 3000)
// Use routes to check if the environment is prod || dev
app.use(routes)
// Use handleRender for SSR
app.use(handleRender)
function handleRender(req, res) {
const context = {};
const html = renderToString(
<StaticRouter location={req.url} context={context} >
<App/>
</StaticRouter>
)
if (context.url) {
res.writeHead(301, {
Location: context.url
})
res.end()
} else {
res.write(`
<!doctype html>
<head>
<title>Redux Universal Example</title>
<link rel="stylesheet" type="text/css" href="/static/bundle.css">
</head>
<body>
<div id="app">${html}</div>
<script type="javascript" src="/static/bundle.js"></script>
</body>
`)
res.end()
}
}
export default app
import express, { Router } from 'express'
import { resolve } from 'path'
import { isDev } from '../utils'
const router = Router();
const clientDir = resolve(`${__dirname}/../../client`);
if (isDev()) {
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
const webpackConfig = require('../../../webpack.config')
const webpackHotMiddleware = require('webpack-hot-middleware')
const compiler = webpack(webpackConfig)
// This compiles our app using webpack
router.use(webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath,
noInfo: true
}))
// This connects our app to HMR using the middleware
router.use(webpackHotMiddleware(compiler))
}
router.use(express.static(clientDir));
export default router