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 PageBasic Example
Next Page路由和导入页面

#导入组件

远程模块可以通过多种方式导入。

#懒加载/异步加载

#默认导出

使用 React.lazy 和 React.Suspense

Hydration Errors

使用 next/dynamic 导入远程模块会导致 hydration error(重新水合错误)。

import React, { lazy } from 'react';
const SampleComponent = lazy(() => import('next2/sampleComponent'));

const FormComponent = ()=>{
  return (
    <Suspense fallback="loading">
      <SampleComponent/>
    </Suspense>
  )
}

export default FormComponent

#Named exports

Named Exports require a mocked default be returned to React.lazy which expects only default exports.

import React, { lazy } from 'react';

const SampleComponent = lazy(() => import('next2/sampleComponent').then((mod) => {
  return { default: mod.NamedComponent };
}));

const FormComponent = () => {
  return (
    <Suspense fallback="loading">
      <SampleComponent />
    </Suspense>
  );
};

export default FormComponent;

#Eager / Sync import

Eager imports work as well, but it is reccomneded to use dynamic imports when possible to avoid large upfront network transfors or requests

let SomeHook = require('next2/someHook');
SomeHook = SomeHook.default || SomeHook;

import SomeComponent, {NamedExportComponent} from 'next2/sampleComponent';

#Client side only

In some cases, you may just want to load a remote module on the client.

For example, if your remote does not provide a commonjs and browser build target.

Node requires a remoteEntry in commonjs format, you cannot provide a browser designated remote to a Server.

import {lazy, Suspense, useEffect, useState} from 'react';

const RemoteModule = typeof window === 'undefined' ? ()=>{} : lazy(() => import('app3/sampleComponent'));

const ClientOnly = ({Component}) => {
  const [mounted, setMount] = useState(false);
  useEffect(() => {
    setMount(true);
  }, []);
  if (mounted) return null;
  return (
    <Suspense fallback="loading">
      <Component />
    </Suspense>
  );
};

const App = ()=>{
  return <ClientOnly Component={RemoteModule} />
}