diff --git a/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/application.mdx b/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/application.mdx index 50072969c33b..17b339f73c3b 100644 --- a/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/application.mdx +++ b/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/application.mdx @@ -75,7 +75,7 @@ If you are not familiar with the capabilities of `$.tsx`, please read [Wildcard ::: ```tsx title="src/routes/remote/$.tsx" -import { createRemoteComponent } from '@module-federation/bridge-react'; +import { createRemoteAppComponent } from '@module-federation/bridge-react'; import { loadRemote } from '@module-federation/modern-js/runtime'; const ErrorBoundary = (info?: { error: { message: string } }) => { @@ -87,7 +87,7 @@ const ErrorBoundary = (info?: { error: { message: string } }) => { ); }; const Loading =
loading...
; -const RemoteApp = createRemoteComponent({ +const RemoteApp = createRemoteAppComponent({ loader: () => loadRemote('remote/app'), fallback: ErrorBoundary, loading: Loading, @@ -97,7 +97,7 @@ export default RemoteApp; ``` :::info -[`createRemoteComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremotecomponent) is used to load application-level modules. +[`createRemoteAppComponent`](https://module-federation.io/practice/bridge/react-bridge.html#createremoteappcomponent) is used to load application-level modules. ::: ## Start the Application diff --git a/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/ssr.mdx b/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/ssr.mdx index 26422f73afac..ca2bfe3211b0 100644 --- a/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/ssr.mdx +++ b/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/ssr.mdx @@ -26,6 +26,45 @@ Currently, `@module-federation/bridge-react` is not compatible with the Node env ## Data Fetching -:::note -Stay tuned -::: \ No newline at end of file +:::tip +Currently, this feature is experimental and has not been fully practiced. Please use it with caution. +::: + +Module Federation now supports [data fetching](https://module-federation.io/zh/guide/basic/data-fetch/index.html#%E7%AE%80%E4%BB%8B) capabilities. Each producer file can have a corresponding data fetching file, with the file name format of `[name].data.ts`. + +In Modern.js, data fetching can be used with SSR. Using the example in the previous chapter, create a data fetching file: + +```ts title="src/components/Button.data.ts" +import type { DataFetchParams } from '@module-federation/modern-js/react'; + +export type Data = { + data: string; +}; + +export const fetchData = async (params: DataFetchParams): Promise => { + return new Promise(resolve => { + setTimeout(() => { + resolve({ + data: `data: ${new Date()}`, + }); + }, 1000); + }); +}; +``` + +In Button, we get the data from the `Props`: + +```ts title="src/components/Button.tsx" +import React from 'react'; +import './index.css'; +import type { Data } from './Button.data'; + +export const Button = (props: { mfData: Data }) => { + const { mfData } = props; + return ( + + ); +}; +``` diff --git a/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/application.mdx b/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/application.mdx index c77aab7bb4b1..1e966627430d 100644 --- a/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/application.mdx +++ b/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/application.mdx @@ -75,7 +75,7 @@ export default createModuleFederationConfig({ ::: ```tsx title="src/routes/remote/$.tsx" -import { createRemoteComponent } from '@module-federation/bridge-react'; +import { createRemoteAppComponent } from '@module-federation/bridge-react'; import { loadRemote } from '@module-federation/modern-js/runtime'; const ErrorBoundary = (info?: { error: { message: string } }) => { @@ -87,7 +87,7 @@ const ErrorBoundary = (info?: { error: { message: string } }) => { ); }; const Loading =
loading...
; -const RemoteApp = createRemoteComponent({ +const RemoteApp = createRemoteAppComponent({ loader: () => loadRemote('remote/app'), fallback: ErrorBoundary, loading: Loading, @@ -97,7 +97,7 @@ export default RemoteApp; ``` :::info -[`createRemoteComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremotecomponent) 用于加载应用级别模块。 +[`createRemoteAppComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremoteappcomponent) 用于加载应用级别模块。 ::: ## 启动应用 diff --git a/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/ssr.mdx b/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/ssr.mdx index a6aa7142b7a1..f1d07cfe505e 100644 --- a/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/ssr.mdx +++ b/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/ssr.mdx @@ -13,9 +13,11 @@ export default defineConfig({ server: { ssr: { mode: 'stream', + // 禁用预渲染,优化 SSR 性能 + disablePrerender: true, }, }, -} +}) ``` 为更好的性能体验,我们仅支持 Streaming SSR 情况使用这种能力组合。 @@ -26,6 +28,45 @@ export default defineConfig({ ## 数据获取 -:::note -敬请期待 -::: \ No newline at end of file +:::tip +目前该功能为实验性功能,功能还未经过充分实践,请谨慎使用。 +::: + +Module Federation 在新版本中支持了[数据获取](https://module-federation.io/zh/guide/basic/data-fetch/index.html#%E7%AE%80%E4%BB%8B)的能力。每个生产者文件都可以有一个对应的数据获取文件,文件名格式为 `[name].data.ts`。 + +在 Modern.js 中,数据获取可以配合 SSR 使用。我们以前面章节的 Demo 为例子,创建一个数据获取文件: + +```ts title="src/components/Button.data.ts" +import type { DataFetchParams } from '@module-federation/modern-js/react'; + +export type Data = { + data: string; +}; + +export const fetchData = async (params: DataFetchParams): Promise => { + return new Promise(resolve => { + setTimeout(() => { + resolve({ + data: `data: ${new Date()}`, + }); + }, 1000); + }); +}; +``` + +在 Button 中,我们从 `Props` 中获取到数据: + +```ts title="src/components/Button.tsx" +import React from 'react'; +import './index.css'; +import type { Data } from './Button.data'; + +export const Button = (props: { mfData: Data }) => { + const { mfData } = props; + return ( + + ); +}; +```