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 =