React SSR集成react-loadable时异步页面不渲染问题求助

我之前在做React SSR集成react-loadable的时候也碰到过一模一样的问题！咱们来一步步排查可能的原因：

1. 确认Loadable.preloadAll()的调用时机是否正确 #

这个方法是异步的，必须等它执行完成后再启动SSR渲染。你需要把它放在async函数里用await包裹，确保所有异步组件的代码都预加载完毕，比如：

async function renderServerSide(req, res) {
  // 必须先等待预加载完成
  await Loadable.preloadAll();
  
  // 再开始渲染应用
  const appHtml = renderToString(<App />);
  // 后续返回HTML的逻辑...
}

如果没有加await，服务端会跳过预加载直接渲染，自然不会把异步组件的内容输出到HTML源码里。

2. 检查是否用了Loadable.Capture收集模块状态 #

光靠preloadAll还不够，你需要在服务端渲染时用Loadable.Capture包裹App，收集所有需要加载的异步模块，再把这些信息注入到客户端HTML中，保证客户端hydration时能匹配服务端的渲染结果。示例代码如下：

import { LoadableCapture } from 'react-loadable';

async function renderServerSide(req, res) {
  await Loadable.preloadAll();
  
  const loadedModules = [];
  const appHtml = renderToString(
    <LoadableCapture report={moduleName => loadedModules.push(moduleName)}>
      <App />
    </LoadableCapture>
  );

  // 把模块信息注入到全局变量，供客户端使用
  const finalHtml = `
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root">${appHtml}</div>
        <script>
          window.__LOADED_MODULES__ = ${JSON.stringify(loadedModules)};
        </script>
        <!-- 客户端bundle引入 -->
      </body>
    </html>
  `;
  res.send(finalHtml);
}

同时在客户端入口文件里，要调用Loadable.preloadModules(window.__LOADED_MODULES__)预加载这些模块，再执行hydration操作。

3. 验证Babel和Webpack配置是否适配Node环境 #

服务端代码需要正确解析import()语法，你需要在Babel配置中添加@babel/plugin-proposal-dynamic-imports或babel-plugin-syntax-dynamic-import插件。如果用Webpack打包服务端代码，要设置target: 'node'，并使用webpack-node-externals排除node_modules，确保动态import被正确处理。

4. 检查异步组件的定义是否正确 #

确保你的异步组件是用Loadable正确包裹的，没有不小心同步导入组件：

// 正确写法
const AsyncComponent = Loadable({
  loader: () => import('./AsyncComponent'),
  loading: () => <div>Loading...</div>
});

// 错误写法（同步导入，不会触发异步加载逻辑）
import AsyncComponent from './AsyncComponent';

如果以上步骤都检查过还是有问题，可以看看服务端日志有没有Loadable.preloadAll()抛出的错误——有时候某个组件的loader出错会导致整个预加载流程中断，服务端就会直接渲染loading组件或者跳过异步内容。

内容的提问来源于stack exchange，提问作者Cornel Janssen