javascript-使用SSR响应HMR

2019-11-08 05:37:17 阅读：250 来源： 互联网

标签：reactjs node-js webpack javascript

我正在尝试为React-application设置SSR,当我在开发环境中首次启动服务器时,一切正常(服务器发送浏览器HTML和CSS),更改应用程序的源代码后,我得到了一个错误：

引发此错误是因为服务器上的源代码已过时,但是客户端具有新版本,React会在出现此问题时通知我.我认为解决此问题的方法是称为HMR(热模块替换)的机制,但是对我来说很难设置.

我的服务器Webpack-config看起来像这样：

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));

旨在将App渲染到NodeStream的renderDocumentToStream函数：

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的第二次调用也未记录

我做错了什么？

解决方法:

该警告明确表明客户端与服务器上的内容不同.这不是一个错误,而是一个警告,这意味着将对性能产生影响,因为React必须在客户端重新渲染,因此实现SSR的整个目的将被挫败.
请检查并确保客户端也获得与服务器相同的水合作用.这应该可以解决问题.

标签：reactjs,node-js,webpack,javascript
来源： https://codeday.me/bug/20191108/2005907.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-使用SSR响应HMR