logologo
指南
实践
配置
插件
案例
博客
生态
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
指南
实践
配置
插件
案例
博客
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo
概览

Bridge

Bridge 介绍

React Bridge

快速开始
导出应用
加载应用
加载模块
Vue Bridge

框架

框架概览

React

Basic CRA with Rsbuild
国际化 (i18n)

Modern.js

快速开始
动态加载生产者

Next.js

Basic Example
导入组件
路由和导入页面
使用 Express.js
预设

Angular

Angular CLI 设置
Micro-frontends with Angular
服务端渲染
使用 Service Workers
Authentication with Auth0
Authentication with Okta
拆分巨石应用
改造巨石应用
Edit this page on GitHub
Previous Page路由和导入页面
Next Page预设

#使用 Express.js

使用 Express 时,热服务器模块重载可能不会在 SSR 之后工作。

这是因为 Express 有自己的路由栈,所以仅重载缓存并不足以让 Express 内部的路由重新加载。

#在 Express 中添加全局回调

对于 Express 和 Next.js 的热模块重载,需要设置一个全局回调来清除 Express 的路由缓存。

这允许在不重启服务器的情况下识别路由更新。

server/express.js
import express from 'express';
import next from 'next';

const dev = process.env.NODE_ENV !== 'production';
const hostname = 'localhost';
const port = 3000;
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

global.clearRoutes = () => {
  server._router.stack = server._router.stack.filter((k) => !(k && k.route && k.route.path));
};

app.prepare().then(() => {
  const server = express();

  server.all('*', (req, res) => {
    const parsedUrl = new URL(req.url, `http://${req.headers.host}`);
    const { pathname, query } = parsedUrl;

    handle(req, res, parsedUrl);
  });

  server.listen(port, () => {
    console.log(`> Ready on http://${hostname}:${port}`);
  });
});

#在重新验证期间触发回调

在 _document.js 中添加一个全局回调,在重新验证期间清除 Express 路由缓存,允许在不重启服务器的情况下提供更新后的路由。

pages/_document.js
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    if (ctx?.pathname && !ctx?.pathname?.endsWith('_error')) {
      await revalidate().then((shouldUpdate) => {
        if (shouldUpdate) {
          global.clearRoutes();
        }
      });
    }

    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}