我正在尝试为React应用程序设置SSR，当我在开发环境中首次启动服务器时，一切正常（服务器发送浏览器HTML和CSS），在更改应用程序源代码后，我遇到了一个错误：
这个错误是由于服务器端的源代码过时，但客户端有新版本并且React通过通知我解决了这个问题。我认为解决这个问题的机制叫做HMR（热模块替换），但对我来说设置它很困难。
我的服务器Webpack配置如下：
const serverConfig = merge(commonConfig, {
name: 'server',
target: 'node',
externals: [
nodeExternals({
whitelist: ['webpack/hot/poll?1000'],
}),
],
entry: ['webpack/hot/poll?1000', appServerEntry],
output: {
path: path.resolve(appDist, 'server'),
filename: 'index.js',
},
plugins: [new webpack.HotModuleReplacementPlugin()],
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
});
每次请求时，服务器都会呈现一个新的UI版本。
app.get('*', (request, response) => {
const staticAssets = getStaticAssets();
const routerContext = {};
const renderStream = renderDocumentToStream({
staticAssets,
request,
routerContext,
});
const cacheStream = createCacheStream(request.path);
response.writeHead(200, { 'Content-Type': 'text/html' });
response.write('<!DOCTYPE html>');
cacheStream.pipe(response);
renderStream.pipe(cacheStream);
});
我使用webpackDevMiddleware和webpackHotMiddleware来实现热重载。
const webpackInstance = webpack(webpackConfig);
const clientCompiler = webpackInstance.compilers.find(cmpl => cmpl.name === 'client');
app.use(
webpackDevMiddleware(clientCompiler, {
hot: true,
stats: 'errors-only',
}),
);
app.use(webpackHotMiddleware(clientCompiler));
renderDocumentToStream 函数用于将 App 渲染成 NodeStream：
import App from './App';
renderDocumentToStream: ({ request, staticAssets, routerContext }) => {
const rootMarkup = renderToString(
<StaticRouter location={request.url} context={routerContext}>
<App />
</StaticRouter>
);
return renderToNodeStream(
<Document
rootMarkup={rootMarkup}
staticAssets={staticAssets}
/>,
);
},
if (module.hot) {
console.log('HERE-0');
module.hot.accept('./App', () => {
console.log('HERE-1');
});
}
当服务器启动时，stdout 日志将首先记录 console.log 的第一次调用。
即使更改了 App.jsx，console.log 的第二次调用也不会被记录。
我做错了什么？