diff --git a/.changeset/breezy-lemons-grin.md b/.changeset/breezy-lemons-grin.md
new file mode 100644
index 00000000000..389846d7a9d
--- /dev/null
+++ b/.changeset/breezy-lemons-grin.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react': patch
+---
+
+feat(bridge-react): export createLazyCompoent api
diff --git a/.changeset/curly-insects-wonder.md b/.changeset/curly-insects-wonder.md
new file mode 100644
index 00000000000..67413e0d0af
--- /dev/null
+++ b/.changeset/curly-insects-wonder.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+refactor(modern-js-plugin): add subpath react to export createLazyCompoent and wrapNoSSR apis
diff --git a/.changeset/curly-pillows-give.md b/.changeset/curly-pillows-give.md
new file mode 100644
index 00000000000..e6ad4e09837
--- /dev/null
+++ b/.changeset/curly-pillows-give.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-vue3': minor
+---
+
+refactor(vue3-bridge): rename createRemoteComponent as createRemoteAppComponent
diff --git a/.changeset/hip-hornets-exercise.md b/.changeset/hip-hornets-exercise.md
new file mode 100644
index 00000000000..e57b68dd904
--- /dev/null
+++ b/.changeset/hip-hornets-exercise.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react': minor
+---
+
+refactor(bridge-react): rename createRemoteComponent as createRemoteAppComponent
diff --git a/.changeset/tender-rocks-leave.md b/.changeset/tender-rocks-leave.md
new file mode 100644
index 00000000000..92cda74e3f0
--- /dev/null
+++ b/.changeset/tender-rocks-leave.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': minor
+---
+
+refactor(modern-js-plugin): deprecate createRemoteComponent and createRemoteSSRComponent
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
index 87ed38eed5c..14b67163349 100644
--- a/.github/workflows/build-and-test.yml
+++ b/.github/workflows/build-and-test.yml
@@ -56,7 +56,7 @@ jobs:
         run: nproc
 
       - name: Warm Nx Cache
-        run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4
+        run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 --skip-nx-cache
 
       - name: Run Build for All
         run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 --skip-nx-cache
diff --git a/.github/workflows/devtools.yml b/.github/workflows/devtools.yml
index fd263b433aa..bdcac4d5cf8 100644
--- a/.github/workflows/devtools.yml
+++ b/.github/workflows/devtools.yml
@@ -38,7 +38,7 @@ jobs:
         run: pnpm install
 
       - name: Run Affected Build
-        run: npx nx run-many --targets=build --projects=tag:type:pkg
+        run: npx nx run-many --targets=build --projects=tag:type:pkg --skip-nx-cache
 
       - name: Configuration xvfb
         shell: bash
diff --git a/apps/modern-component-data-fetch/host/src/routes/basic/page.tsx b/apps/modern-component-data-fetch/host/src/routes/basic/page.tsx
index 03de3de3524..ad3c3fd73fb 100644
--- a/apps/modern-component-data-fetch/host/src/routes/basic/page.tsx
+++ b/apps/modern-component-data-fetch/host/src/routes/basic/page.tsx
@@ -1,8 +1,7 @@
-import { kit, ERROR_TYPE } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { ERROR_TYPE } from '@module-federation/modern-js/react';
 
-const { createRemoteComponent } = kit;
-
-const Basic = createRemoteComponent({
+const Basic = getInstance()!.createLazyComponent({
   loader: () => {
     return import('remote/BasicComponent');
   },
diff --git a/apps/modern-component-data-fetch/host/src/routes/client-downgrade/page.tsx b/apps/modern-component-data-fetch/host/src/routes/client-downgrade/page.tsx
index b01971f8aed..32ae80ad2fe 100644
--- a/apps/modern-component-data-fetch/host/src/routes/client-downgrade/page.tsx
+++ b/apps/modern-component-data-fetch/host/src/routes/client-downgrade/page.tsx
@@ -1,8 +1,6 @@
-import { kit } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
 
-const { createRemoteComponent } = kit;
-
-const ClientDowngrade = createRemoteComponent({
+const ClientDowngrade = getInstance()!.createLazyComponent({
   loader: () => {
     return import('remote/ClientDowngrade');
   },
diff --git a/apps/modern-component-data-fetch/host/src/routes/csr/page.tsx b/apps/modern-component-data-fetch/host/src/routes/csr/page.tsx
index 80fed2d9778..261093cd4d2 100644
--- a/apps/modern-component-data-fetch/host/src/routes/csr/page.tsx
+++ b/apps/modern-component-data-fetch/host/src/routes/csr/page.tsx
@@ -1,9 +1,9 @@
-import { kit } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
 
-const { createRemoteComponent, wrapNoSSR } = kit;
-
-const CsrWithFetchDataFromServerComponent = wrapNoSSR(createRemoteComponent)({
+const CsrWithFetchDataFromServerComponent = getInstance()!.createLazyComponent({
+  noSSR: true,
   loader: () => {
+    console.log('calling');
     return import('provider-csr');
   },
   loading: 'loading...',
diff --git a/apps/modern-component-data-fetch/host/src/routes/layout.tsx b/apps/modern-component-data-fetch/host/src/routes/layout.tsx
index 25ce86d7e1a..ec55820a6b4 100644
--- a/apps/modern-component-data-fetch/host/src/routes/layout.tsx
+++ b/apps/modern-component-data-fetch/host/src/routes/layout.tsx
@@ -1,6 +1,18 @@
 import React from 'react';
 import { Outlet, useNavigate, useLocation } from '@modern-js/runtime/router';
 import { Layout, Menu } from 'antd';
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
+
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
+console.log('layout');
+getInstance()!.prefetch({
+  id: 'remote/BasicComponent',
+});
+
+getInstance()!.prefetch({
+  id: 'provider-csr',
+});
 
 const { Header, Content } = Layout;
 
diff --git a/apps/modern-component-data-fetch/host/src/routes/server-downgrade/page.tsx b/apps/modern-component-data-fetch/host/src/routes/server-downgrade/page.tsx
index d4d2a5661c7..cae8591ba5a 100644
--- a/apps/modern-component-data-fetch/host/src/routes/server-downgrade/page.tsx
+++ b/apps/modern-component-data-fetch/host/src/routes/server-downgrade/page.tsx
@@ -1,8 +1,6 @@
-import { kit } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
 
-const { createRemoteComponent } = kit;
-
-const ServerDowngrade = createRemoteComponent({
+const ServerDowngrade = getInstance()!.createLazyComponent({
   loader: () => {
     return import('remote/ServerDowngrade');
   },
diff --git a/apps/modern-component-data-fetch/provider-csr/module-federation.config.ts b/apps/modern-component-data-fetch/provider-csr/module-federation.config.ts
index bc0fc0ec85d..e8784e9e8bc 100644
--- a/apps/modern-component-data-fetch/provider-csr/module-federation.config.ts
+++ b/apps/modern-component-data-fetch/provider-csr/module-federation.config.ts
@@ -1,4 +1,4 @@
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
 
 export default createModuleFederationConfig({
   name: 'provider_csr',
diff --git a/apps/modern-component-data-fetch/provider-csr/package.json b/apps/modern-component-data-fetch/provider-csr/package.json
index beee230d6b9..5ef916dfc48 100644
--- a/apps/modern-component-data-fetch/provider-csr/package.json
+++ b/apps/modern-component-data-fetch/provider-csr/package.json
@@ -8,6 +8,7 @@
     "build:watch": "rslib build --watch"
   },
   "devDependencies": {
+    "@module-federation/bridge-react": "workspace:*",
     "@module-federation/enhanced": "workspace:*",
     "@module-federation/rsbuild-plugin": "workspace:*",
     "@module-federation/storybook-addon": "workspace:*",
diff --git a/apps/modern-component-data-fetch/provider-csr/src/index.data.ts b/apps/modern-component-data-fetch/provider-csr/src/index.data.ts
index 9cbe4997e71..4a1391087d5 100644
--- a/apps/modern-component-data-fetch/provider-csr/src/index.data.ts
+++ b/apps/modern-component-data-fetch/provider-csr/src/index.data.ts
@@ -1,8 +1,10 @@
+import { cache } from '@module-federation/bridge-react';
 export type Data = {
   data: string;
 };
 
-export const fetchData = async (): Promise<Data> => {
+export const fetchData = cache(async (): Promise<Data> => {
+  console.log(`[ csr provider - server ] fetch data: ${new Date()}`);
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
@@ -10,4 +12,4 @@ export const fetchData = async (): Promise<Data> => {
       });
     }, 1000);
   });
-};
+});
diff --git a/apps/modern-component-data-fetch/provider/src/components/BasicComponent/index.data.ts b/apps/modern-component-data-fetch/provider/src/components/BasicComponent/index.data.ts
index 5586247ab1c..bf4230c2149 100644
--- a/apps/modern-component-data-fetch/provider/src/components/BasicComponent/index.data.ts
+++ b/apps/modern-component-data-fetch/provider/src/components/BasicComponent/index.data.ts
@@ -1,8 +1,11 @@
+import { cache } from '@module-federation/modern-js/react';
+
 export type Data = {
   data: string;
 };
 
-export const fetchData = async (): Promise<Data> => {
+export const fetchData = cache(async (): Promise<Data> => {
+  console.log('provder-server called');
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
@@ -10,4 +13,4 @@ export const fetchData = async (): Promise<Data> => {
       });
     }, 1000);
   });
-};
+});
diff --git a/apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx b/apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx
index 312936b2d32..bdbfe4644c2 100644
--- a/apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx
+++ b/apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import Button from 'antd/lib/button';
 import {
+  getInstance,
   registerRemotes,
   loadRemote,
-  kit,
 } from '@module-federation/modern-js/runtime';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
 import stuff from './stuff.module.css';
 
-const { createRemoteSSRComponent } = kit;
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
 
 registerRemotes([
   {
@@ -16,7 +17,7 @@ registerRemotes([
   },
 ]);
 
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = getInstance()!.createLazyComponent({
   loader: () => loadRemote('dynamic_remote'),
   loading: 'loading...',
   fallback: ({ error }) => {
diff --git a/apps/modernjs-ssr/host/src/routes/dynamic-remote/page.tsx b/apps/modernjs-ssr/host/src/routes/dynamic-remote/page.tsx
index d95ab03769b..6f54211172a 100644
--- a/apps/modernjs-ssr/host/src/routes/dynamic-remote/page.tsx
+++ b/apps/modernjs-ssr/host/src/routes/dynamic-remote/page.tsx
@@ -1,12 +1,10 @@
 import React, { useState, Suspense } from 'react';
 import {
+  getInstance,
   loadRemote,
   registerRemotes,
-  kit,
 } from '@module-federation/modern-js/runtime';
 
-const { createRemoteSSRComponent } = kit;
-
 registerRemotes([
   {
     name: 'dynamic_remote',
@@ -14,7 +12,7 @@ registerRemotes([
   },
 ]);
 
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = getInstance()!.createLazyComponent({
   loader: () => loadRemote('dynamic_remote'),
   loading: 'loading...',
   fallback: ({ error }) => {
diff --git a/apps/modernjs-ssr/host/src/routes/layout.tsx b/apps/modernjs-ssr/host/src/routes/layout.tsx
index 6cd5fc73bcb..ae85bd69429 100644
--- a/apps/modernjs-ssr/host/src/routes/layout.tsx
+++ b/apps/modernjs-ssr/host/src/routes/layout.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { Outlet, useNavigate } from '@modern-js/runtime/router';
 import { Layout, Menu } from 'antd';
-
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
+import { getInstance } from '@module-federation/modern-js/runtime';
 const { Header, Content } = Layout;
 
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
 const App: React.FC = () => {
   const navi = useNavigate();
 
diff --git a/apps/modernjs-ssr/nested-remote/src/routes/page.tsx b/apps/modernjs-ssr/nested-remote/src/routes/page.tsx
index 84b8509ef14..1dfb9347068 100644
--- a/apps/modernjs-ssr/nested-remote/src/routes/page.tsx
+++ b/apps/modernjs-ssr/nested-remote/src/routes/page.tsx
@@ -1,11 +1,12 @@
-import { kit } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
 
 import Content from '../components/Content';
 import './index.css';
 
-const { createRemoteSSRComponent } = kit;
+getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
 
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = getInstance()!.createLazyComponent({
   loader: () => import('remote/Button'),
   loading: 'loading...',
   export: 'Button',
diff --git a/apps/router-demo/router-host-2000/src/App.tsx b/apps/router-demo/router-host-2000/src/App.tsx
index 5412248dd30..562ab57da1a 100644
--- a/apps/router-demo/router-host-2000/src/App.tsx
+++ b/apps/router-demo/router-host-2000/src/App.tsx
@@ -7,7 +7,7 @@ import React, {
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { init, loadRemote } from '@module-federation/enhanced/runtime';
 import { RetryPlugin } from '@module-federation/retry-plugin';
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 import Navigation from './navigation';
 import Detail from './pages/Detail';
 import Home from './pages/Home';
@@ -67,13 +67,13 @@ const FallbackErrorComp = (info: any) => {
 
 const FallbackComp = <div data-test-id="loading">loading...</div>;
 
-const Remote1App = createRemoteComponent({
+const Remote1App = createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const Remote5App = createRemoteComponent({
+const Remote5App = createRemoteAppComponent({
   loader: () => loadRemote('remote5/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
@@ -136,26 +136,26 @@ const Remote1AppWithErrorBoundary = React.forwardRef<any, any>((props, ref) => (
   </ErrorBoundary>
 ));
 
-const Remote2App = createRemoteComponent({
+const Remote2App = createRemoteAppComponent({
   loader: () => import('remote2/export-app'),
   export: 'provider',
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const Remote3App = createRemoteComponent({
+const Remote3App = createRemoteAppComponent({
   loader: () => loadRemote('remote3/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const RemoteRenderErrorApp = createRemoteComponent({
+const RemoteRenderErrorApp = createRemoteAppComponent({
   loader: () => loadRemote('remote-render-error/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 }) as ForwardRefExoticComponent<unknown>;
 
-const RemoteResourceErrorApp = createRemoteComponent({
+const RemoteResourceErrorApp = createRemoteAppComponent({
   loader: () => loadRemote('remote-resource-error/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
diff --git a/apps/router-demo/router-host-2000/src/pages/Home.tsx b/apps/router-demo/router-host-2000/src/pages/Home.tsx
index e31d64c2bf5..c4a281906fc 100644
--- a/apps/router-demo/router-host-2000/src/pages/Home.tsx
+++ b/apps/router-demo/router-host-2000/src/pages/Home.tsx
@@ -3,7 +3,7 @@ import { Space, Table, Tag } from 'antd';
 import type { TableProps } from 'antd';
 import type React from 'react';
 import { init, loadRemote } from '@module-federation/enhanced/runtime';
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 
 interface DataType {
   key: string;
@@ -86,7 +86,7 @@ const data: DataType[] = [
   },
 ];
 
-const Remote1Button = createRemoteComponent<any, any>({
+const Remote1Button = createRemoteAppComponent<any, any>({
   loader: () => loadRemote('remote1/export-button'),
   // @ts-ignore
   fallback: null,
diff --git a/apps/router-demo/router-host-v5-2200/src/App.tsx b/apps/router-demo/router-host-v5-2200/src/App.tsx
index 9b7200465a3..bdac28f68a1 100644
--- a/apps/router-demo/router-host-v5-2200/src/App.tsx
+++ b/apps/router-demo/router-host-v5-2200/src/App.tsx
@@ -4,7 +4,7 @@ import './App.css';
 import Navigation from './navigation';
 import Home from './pages/Home';
 import { loadRemote } from '@module-federation/enhanced/runtime';
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 
 const FallbackErrorComp = (info: any) => {
   return <div>{info?.error?.message}</div>;
@@ -12,13 +12,13 @@ const FallbackErrorComp = (info: any) => {
 
 const FallbackComp = <div>loading</div>;
 
-const Remote1App = createRemoteComponent({
+const Remote1App = createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
 });
 
-const Remote2App = createRemoteComponent({
+const Remote2App = createRemoteAppComponent({
   // @ts-ignore
   loader: () => import('remote2/export-app'),
   export: 'provider',
@@ -26,7 +26,7 @@ const Remote2App = createRemoteComponent({
   loading: FallbackComp,
 });
 
-const Remote3App = createRemoteComponent({
+const Remote3App = createRemoteAppComponent({
   loader: () => loadRemote('remote3/export-app'),
   fallback: FallbackErrorComp,
   loading: FallbackComp,
diff --git a/apps/router-demo/router-host-vue3-2100/src/router.ts b/apps/router-demo/router-host-vue3-2100/src/router.ts
index 450339df79f..a1a30cc29b9 100644
--- a/apps/router-demo/router-host-vue3-2100/src/router.ts
+++ b/apps/router-demo/router-host-vue3-2100/src/router.ts
@@ -8,7 +8,7 @@ import Detail from '@/pages/Detail.vue';
 import { loadRemote, init } from '@module-federation/enhanced/runtime';
 import * as bridge from '@module-federation/bridge-vue3';
 
-const Remote2 = bridge.createRemoteComponent({
+const Remote2 = bridge.createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
 });
 
diff --git a/apps/website-new/docs/en/guide/framework/modernjs.mdx b/apps/website-new/docs/en/guide/framework/modernjs.mdx
index 5286aeb6ad3..816fe54dc93 100644
--- a/apps/website-new/docs/en/guide/framework/modernjs.mdx
+++ b/apps/website-new/docs/en/guide/framework/modernjs.mdx
@@ -191,14 +191,14 @@ export default Index;
 
 #### Consumer
 
-In the consumer, we need to use `createRemoteComponent` to load the remote component and fetch data.
+In the consumer, we need to use `createLazyComponent` to load the remote component and fetch data.
 
 ```tsx
-import { kit, ERROR_TYPE } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent, ERROR_TYPE } from '@module-federation/modern-js/react';
 
-const { createRemoteComponent } = kit;
-
-const List = createRemoteComponent({
+const List = createLazyComponent({
+  instance: getInstance(),
   loader: () => {
     return import('remote/List');
   },
@@ -236,7 +236,7 @@ By default, parameters are passed to the loader function. The type is `DataFetch
 
 - `isDowngrade` (boolean): Indicates whether the current execution context is in downgrade mode. For example, if Server-Side Rendering (SSR) fails and falls back to Client-Side Rendering (CSR), a request will be re-initiated to the server to call the loader function, and this value will be `true`.
 
-In addition to the default parameters, you can also pass the [dataFetchParams](#datafetchparams) field in `createRemoteComponent`. This field will be passed through to the loader function.
+In addition to the default parameters, you can also pass the [dataFetchParams](#datafetchparams) field in `createLazyComponent`. This field will be passed through to the loader function.
 
 #### Return Value
 
@@ -304,21 +304,22 @@ In addition to exporting [MF Runtime](../basic/runtime/runtime-api), `@module-fe
 To prevent conflicts with Shared modules, you need to import them as follows:
 
 ```ts
-import { kit } from '@module-federation/modern-js/runtime';
-const { loadRemote ,createRemoteComponent, createRemoteSSRComponent, wrapNoSSR } = kit;
+import { loadRemote, getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent, wrapNoSSR } from '@module-federation/modern-js/react';
 ```
 
-### createRemoteComponent
+### createLazyComponent
 
 import Collapse from '@components/Collapse'
 
 <Collapse>
 ```ts
-declare function createRemoteComponent(
-  props: CreateRemoteComponentOptions
+declare function createLazyComponent(
+  props: CreateLazyComponentOptions
 ): (props: ComponentType) => React.JSX.Element;
 
-type CreateRemoteComponentOptions<T, E extends keyof T> = {
+type CreateLazyComponentOptions<T, E extends keyof T> = {
+  instance: ReturnType<typeof getInstance>;
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
@@ -353,11 +354,11 @@ This function supports loading components and also provides the following capabi
 
 ```tsx
 import React, { FC, memo, useEffect } from 'react';
-import { kit, ERROR_TYPE } from '@module-federation/modern-js/runtime';
-
-const { createRemoteComponent } = kit;
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent, ERROR_TYPE } from '@module-federation/modern-js/react';
 
-const RemoteComponent = createRemoteComponent({
+const LazyComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: <div>loading...</div>,
   fallback: ({error,errorType,dataFetchMapKey}) => {
@@ -374,7 +375,7 @@ const RemoteComponent = createRemoteComponent({
 
 const App: FC = () => {
   return <>
-    <RemoteComponent />
+    <LazyComponent />
   </>;
 };
 export default App;
@@ -420,19 +421,13 @@ If the remote component is a named export, you can use this parameter to specify
 
 If the remote component has a data fetching function, setting this will pass it to the data fetching function.
 
-### createRemoteSSRComponent
-
-:::danger Note
-This function will be deprecated. It is recommended to use [createRemoteComponent](#createremotecomponent).
-:::
-
 ### wrapNoSSR
 
 <Collapse>
 ```ts
 declare function wrapNoSSR<T, E extends keyof T>(
-  createComponentFn: typeof createRemoteComponent<T, E>,
-) : (options: CreateRemoteComponentOptions<T, E>) => (props: ComponentType) => React.JSX.Element
+  createLazyComponentFn: typeof createLazyComponent<T, E>,
+) : (options: CreateLazyComponentOptions<T, E>) => (props: ComponentType) => React.JSX.Element
 ```
 </Collapse>
 
@@ -441,11 +436,11 @@ Wraps a component so that it does not render in SSR scenarios.
 Usage example:
 
 ```tsx
-import { kit } from '@module-federation/modern-js/runtime';
-
-const { createRemoteComponent, wrapNoSSR } = kit;
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent, wrapNoSSR } from '@module-federation/modern-js/react';
 
-const RemoteComponent = wrapNoSSR(createRemoteComponent)({
+const LazyComponent = wrapNoSSR(createLazyComponent)({
+  instance: getInstance(),
   loader: () => {
     return import('remote/Content');
   },
@@ -465,7 +460,7 @@ const Index = (): JSX.Element => {
       <h1>
         The component will be render in csr.
       </h1>
-      <RemoteComponent />
+      <LazyComponent />
     </div>
   );
 };
diff --git a/apps/website-new/docs/en/practice/bridge/index.mdx b/apps/website-new/docs/en/practice/bridge/index.mdx
index f54930b89f1..b2dd3adc1d9 100644
--- a/apps/website-new/docs/en/practice/bridge/index.mdx
+++ b/apps/website-new/docs/en/practice/bridge/index.mdx
@@ -27,11 +27,13 @@ This toolkit provides two APIs:
 
 > Used to create React application-type module exports. If your application is React-based and you want it to be loaded as an application-type module by another MF application, you should use this to create standard-compliant exports for your application.
 
-- createRemoteComponent
+- createRemoteAppComponent
+
+> Used to load application-type modules in a React application. The loaded module must be wrapped by `createBridgeComponent`. `createRemoteAppComponent` will automatically create a rendering context in your application to ensure the module works properly.
 
-> Used to load application-type modules in a React application. The loaded module must be wrapped by `createBridgeComponent`. `createRemoteComponent` will automatically create a rendering context in your application to ensure the module works properly.
+- createRemoteComponent
 
-For usage of `@module-federation/bridge-react`, see [Host demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-host-2000) and [Remote demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-remote2-2002).
+> It will be deprecated, please use `createRemoteAppComponent` instead.
 
 ### @module-federation/bridge-vue3
 
@@ -43,9 +45,9 @@ This toolkit provides two APIs:
 
 > Used to create Vue application-type module exports. If your application is Vue v3-based and you want it to be loaded as an application-type module by another MF application, you should use this to create standard-compliant exports for your application.
 
-- createRemoteComponent
+- createRemoteAppComponent
 
-> Used to load application-type modules in a Vue application. The loaded module must be wrapped by `createBridgeComponent`. `createRemoteComponent` will automatically create a rendering context in your application to ensure the module works properly.
+> Used to load application-type modules in a Vue application. The loaded module must be wrapped by `createBridgeComponent`. `createRemoteAppComponent` will automatically create a rendering context in your application to ensure the module works properly.
 
 ## FAQ
 
diff --git a/apps/website-new/docs/en/practice/bridge/react-bridge.mdx b/apps/website-new/docs/en/practice/bridge/react-bridge.mdx
index 5f55234874f..af7dab26783 100644
--- a/apps/website-new/docs/en/practice/bridge/react-bridge.mdx
+++ b/apps/website-new/docs/en/practice/bridge/react-bridge.mdx
@@ -2,7 +2,7 @@
 
 `@module-federation/bridge-react` provides bridge utility functions for React applications:
 - `createBridgeComponent`: Used for exporting application-level modules, suitable for producers to wrap modules exported as application types
-- `createRemoteComponent`: Used for loading application-level modules, suitable for consumers to load modules as application types
+- `createRemoteAppComponent`: Used for loading application-level modules, suitable for consumers to load modules as application types
 
 ### React Version Compatibility
 
@@ -118,11 +118,11 @@ export default defineConfig({
 });
 ```
 
-- Step 2: In the host application, we need to use `createRemoteComponent` to load the remote application.
+- Step 2: In the host application, we need to use `createRemoteAppComponent` to load the remote application.
 
 ```tsx
 // ./src/App.tsx
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 import { loadRemote } from '@module-federation/runtime';
 
 // Define FallbackError component
@@ -141,8 +141,8 @@ const FallbackErrorComp = ({ error }: { error: Error }) => {
 // Define FallbackLoading component
 const FallbackComp = <div data-test-id="loading">loading...</div>;
 
-// Use createRemoteComponent to create remote component
-const Remote1App = createRemoteComponent({
+// Use createRemoteAppComponent to create remote component
+const Remote1App = createRemoteAppComponent({
   // loader is used to load remote modules, e.g.: loadRemote('remote1/export-app'), import('remote1/export-app')
   loader: () => loadRemote('remote1/export-app'),
   // fallback is used for displaying components when remote module loading fails
@@ -177,10 +177,10 @@ const App = () => {
 
 :::info
 
-1. The remote module exported by `createRemoteComponent` will automatically use the react-bridge loading protocol to load the module,
+1. The remote module exported by `createRemoteAppComponent` will automatically use the react-bridge loading protocol to load the module,
 making cross-framework rendering of applications possible.
 
-2. Additionally, `createRemoteComponent` will automatically handle module loading, module destruction, error handling, loading, routing, and other logic,
+2. Additionally, `createRemoteAppComponent` will automatically handle module loading, module destruction, error handling, loading, routing, and other logic,
 allowing developers to focus solely on how to use the remote component.
 
 :::
@@ -210,8 +210,8 @@ function createBridgeComponent<T>(
 interface ProviderFnParams<T> {
   /** Root component to be remotely loaded */
   rootComponent: React.ComponentType<T>;
-  
-  /** 
+
+  /**
    * Custom render function for custom rendering logic
    * @param App - React element
    * @param id - DOM element or string ID
@@ -221,8 +221,8 @@ interface ProviderFnParams<T> {
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
-  
-  /** 
+
+  /**
    * Custom createRoot function for React 18 and above
    * @param container - DOM container
    * @param options - CreateRoot options
@@ -232,7 +232,7 @@ interface ProviderFnParams<T> {
     container: Element | DocumentFragment,
     options?: CreateRootOptions,
   ) => Root;
-  
+
   /**
    * Default options for createRoot in React 18 and 19
    * These options will be used when creating a root unless overridden by rootOptions in render params
@@ -246,9 +246,9 @@ interface ProviderFnParams<T> {
 }
 ```
 
-#### createRemoteComponent
+#### createRemoteAppComponent
 
-`createRemoteComponent` is used to load remote React components.
+`createRemoteAppComponent` is used to load remote React components.
 
 ```tsx
 /**
@@ -256,7 +256,7 @@ interface ProviderFnParams<T> {
  * @param options - Remote component configuration options
  * @returns Returns a React component that can receive props and render remote component
  */
-function createRemoteComponent<T, E extends keyof T = 'default'>(
+function createRemoteAppComponent<T, E extends keyof T = 'default'>(
   options: RemoteComponentParams<T, E>
 ): React.ForwardRefExoticComponent<
   React.PropsWithoutRef<RemoteComponentProps> & React.RefAttributes<HTMLDivElement>
@@ -269,19 +269,19 @@ interface RemoteComponentParams<
   T = Record<string, unknown>,
   E extends keyof T = keyof T
 > {
-  /** 
+  /**
    * Function to load remote module
    * Example: () => loadRemote('remote1/export-app') or () => import('remote1/export-app')
    */
   loader: () => Promise<T>;
-  
+
   /** Component displayed when loading remote module */
   loading: React.ReactNode;
-  
+
   /** Error component displayed when loading or rendering remote module fails */
   fallback: React.ComponentType<{ error: Error }>;
-  
-  /** 
+
+  /**
    * Specify module export name
    * Default is 'default'
    */
@@ -295,18 +295,18 @@ interface RemoteComponentProps<T = Record<string, unknown>> {
   /** Properties passed to remote component */
   props?: T;
 
-  /** 
+  /**
    * Memory route configuration, used to control child application routing as memoryRouter
    * Will not directly display URL in browser address bar
    */
   memoryRoute?: { entryPath: string };
-  
+
   /** Base path name */
   basename?: string;
-  
+
   /** Style */
   style?: React.CSSProperties;
-  
+
   /** Class name */
   className?: string;
 }
@@ -323,7 +323,7 @@ export const provider = createBridgeComponent({
 });
 
 // host
-const Remote1App = createRemoteComponent({
+const Remote1App = createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
   export: 'provider', // Specify to use provider export
   fallback: FallbackErrorComp,
@@ -385,15 +385,15 @@ export default createBridgeComponent({
 
 ```tsx
 // In the consumer application
-const RemoteApp = createRemoteComponent({
+const RemoteApp = createRemoteAppComponent({
   url: 'http://localhost:3001/remoteEntry.js',
   scope: 'remote',
   module: './App',
 });
 
 // Pass rootOptions when rendering
-<RemoteApp 
-  props={{ message: 'Hello' }} 
+<RemoteApp
+  props={{ message: 'Hello' }}
   rootOptions={{
     identifierPrefix: 'instance-',
     onRecoverableError: (error) => {
diff --git a/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx b/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx
index 92a92f4c39b..22dea28a186 100644
--- a/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx
+++ b/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx
@@ -1,6 +1,6 @@
 # Vue Bridge (for Vue v3)
 
-`@module-federation/bridge-vue3` provides a `bridge` utility function for Vue V3 applications. The provided `createBridgeComponent` can be used to export application-level modules, and `createRemoteComponent` can be used to load application-level modules.
+`@module-federation/bridge-vue3` provides a `bridge` utility function for Vue V3 applications. The provided `createBridgeComponent` can be used to export application-level modules, and `createRemoteAppComponent` can be used to load application-level modules.
 
 ### Installation
 
@@ -17,7 +17,7 @@ import { PackageManagerTabs } from '@theme';
 ### Type
 
 ```tsx
-function createRemoteComponent<T, E extends keyof T>(
+function createRemoteAppComponent<T, E extends keyof T>(
   options: {
     // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
     loader: () => Promise<T>;
@@ -117,7 +117,7 @@ export default defineConfig({
 // ./src/router.ts
 import * as bridge from '@module-federation/bridge-vue3';
 
-const Remote2 = bridge.createRemoteComponent({ loader: () => loadRemote('remote1/export-app'), rootAttrs: {class: 'root-element-class'} });
+const Remote2 = bridge.createRemoteAppComponent({ loader: () => loadRemote('remote1/export-app'), rootAttrs: {class: 'root-element-class'} });
 
 const router = createRouter({
   history: createWebHistory(),
@@ -133,10 +133,10 @@ export default router;
 
 ### Parameters
 
-#### createRemoteComponent
+#### createRemoteAppComponent
 
 ```tsx
-function createRemoteComponent<T, E extends keyof T>(
+function createRemoteAppComponent<T, E extends keyof T>(
   options: {
     // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
     loader: () => Promise<T>;
@@ -155,7 +155,7 @@ function createRemoteComponent<T, E extends keyof T>(
 
 
 ```tsx
-const Remote1App = createRemoteComponent({ loader: () => loadRemote('remote1/export-app') });
+const Remote1App = createRemoteAppComponent({ loader: () => loadRemote('remote1/export-app') });
 ```
 
 * `options`
@@ -178,7 +178,7 @@ export const provider = createBridgeComponent({
 });
 
 // host
-const Remote1App = createRemoteComponent({
+const Remote1App = createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
   export: 'provider'
 });
@@ -191,7 +191,7 @@ const Remote1App = createRemoteComponent({
 ```tsx
 import * as bridge from '@module-federation/bridge-vue3';
 
-const Remote2 = bridge.createRemoteComponent({ loader: () => loadRemote('remote1/export-app'), rootAttrs: {class: 'root-element-class'} });
+const Remote2 = bridge.createRemoteAppComponent({ loader: () => loadRemote('remote1/export-app'), rootAttrs: {class: 'root-element-class'} });
 
 const router = createRouter({
   history: createWebHistory(),
diff --git a/apps/website-new/docs/en/practice/frameworks/modern/dynamic-remote.mdx b/apps/website-new/docs/en/practice/frameworks/modern/dynamic-remote.mdx
index 28a88de4c40..7d12548f33a 100644
--- a/apps/website-new/docs/en/practice/frameworks/modern/dynamic-remote.mdx
+++ b/apps/website-new/docs/en/practice/frameworks/modern/dynamic-remote.mdx
@@ -147,16 +147,16 @@ export const loader = async ({ request }: LoaderFunctionArgs): Promise<DataLoade
 Consume loader data and dynamically load the corresponding producer:
 
 ```tsx
-import { kit, loadRemote, registerRemotes } from '@module-federation/modern-js/runtime';
+import { loadRemote, registerRemotes, getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent } from '@module-federation/modern-js/react';
 // Use import type to get data loader types
 import type { DataLoaderRes } from './page.data';
 import { useLoaderData } from '@modern-js/runtime/router';
 
 import './index.css';
 
-const { createRemoteSSRComponent } = kit;
-
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: 'loading...',
   export: 'default',
@@ -176,7 +176,8 @@ const Index = () => {
 
   const DynamicRemoteSSRComponents = dataLoader.providerList.map(item => {
     const { id } = item;
-    const Com = createRemoteSSRComponent({
+    const Com = createLazyComponent({
+      instance: getInstance(),
       loader: () => loadRemote(id),
       loading: 'loading...',
       fallback: ({ error }) => {
diff --git a/apps/website-new/docs/en/practice/frameworks/modern/index.mdx b/apps/website-new/docs/en/practice/frameworks/modern/index.mdx
index 7c6fc66a798..c9cbe541bdd 100644
--- a/apps/website-new/docs/en/practice/frameworks/modern/index.mdx
+++ b/apps/website-new/docs/en/practice/frameworks/modern/index.mdx
@@ -254,12 +254,12 @@ This is because the producer's style files cannot be injected into the correspon
 This issue can be solved by using the [createremotessrcomponent](../../../guide/framework/modernjs#createremotessrcomponent) provided by `@module-federation/modern-js`.
 
 ```tsx title='page.tsx'
-import { kit } from '@module-federation/modern-js/runtime'
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent } from '@module-federation/modern-js/react'
 import './index.css';
 
-const { createRemoteSSRComponent } = kit;
-
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: 'loading...',
   export: 'default',
diff --git a/apps/website-new/docs/zh/guide/framework/modernjs.mdx b/apps/website-new/docs/zh/guide/framework/modernjs.mdx
index 55305dfbe1b..624bb5d6dc0 100644
--- a/apps/website-new/docs/zh/guide/framework/modernjs.mdx
+++ b/apps/website-new/docs/zh/guide/framework/modernjs.mdx
@@ -192,14 +192,14 @@ export default Index;
 
 #### 消费者
 
-在消费者中，我们需要通过 `createRemoteComponent` 来加载远程组件，并获取数据。
+在消费者中，我们需要通过 `createLazyComponent` 来加载远程组件，并获取数据。
 
 ```tsx
-import { kit, ERROR_TYPE } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent, ERROR_TYPE } from '@module-federation/modern-js/react';
 
-const { createRemoteComponent } = kit;
-
-const List = createRemoteComponent({
+const List = createLazyComponent({
+  instance: getInstance(),
   loader: () => {
     return import('remote/List');
   },
@@ -237,7 +237,7 @@ export default Index;
 
 - `isDowngrade` (boolean): 表示当前执行上下文是否处于降级模式。例如，在服务端渲染 (SSR) 失败，在客户端渲染（CSR）中会重新往服务端发起请求，调用 loader 函数，此时该值为 `true`。
 
-除了默认的参数以外，还可以在 `createRemoteComponent` 中传递 [dataFetchParams](#datafetchparams) 字段，该字段会被透传给 loader 函数。
+除了默认的参数以外，还可以在 `createLazyComponent` 中传递 [dataFetchParams](#datafetchparams) 字段，该字段会被透传给 loader 函数。
 
 #### 返回值
 
@@ -306,21 +306,22 @@ export async function loader({ params }) {
 为防止与 Shared 冲突，需要通过下列方式引用。
 
 ```ts
-import { kit } from '@module-federation/modern-js/runtime';
-const { loadRemote ,createRemoteComponent, createRemoteSSRComponent, wrapNoSSR } = kit;
+import { loadRemote, getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent, wrapNoSSR } from '@module-federation/modern-js/react';
 ```
 
-### createRemoteComponent
+### createLazyComponent
 
 import Collapse from '@components/Collapse'
 
 <Collapse>
 ```ts
-declare function createRemoteComponent(
-  props: CreateRemoteComponentOptions
+declare function createLazyComponent(
+  props: CreateLazyComponentOptions
 ): (props: ComponentType) => React.JSX.Element;
 
-type CreateRemoteComponentOptions<T, E extends keyof T> = {
+type CreateLazyComponentOptions<T, E extends keyof T> = {
+  instance: ReturnType<typeof getInstance>;
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
@@ -355,11 +356,11 @@ type ErrorInfo = {
 
 ```tsx
 import React, { FC, memo, useEffect } from 'react';
-import { kit, ERROR_TYPE } from '@module-federation/modern-js/runtime';
-
-const { createRemoteComponent } = kit;
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent, ERROR_TYPE } from '@module-federation/modern-js/react';
 
-const RemoteComponent = createRemoteComponent({
+const LazyComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: <div>loading...</div>,
   fallback: ({error,errorType,dataFetchMapKey}) => {
@@ -376,7 +377,7 @@ const RemoteComponent = createRemoteComponent({
 
 const App: FC = () => {
   return <>
-    <RemoteComponent />
+    <LazyComponent />
   </>;
 };
 export default App;
@@ -422,19 +423,13 @@ export default App;
 
 如果远程组件存在数据获取函数，设置后会传递给数据获取函数。
 
-### createRemoteSSRComponent
-
-:::danger 注意
-此函数将被废弃。推荐使用 [createRemoteComponent](#createremotecomponent)
-:::
-
 ### wrapNoSSR
 
 <Collapse>
 ```ts
 declare function wrapNoSSR<T, E extends keyof T>(
-  createComponentFn: typeof createRemoteComponent<T, E>,
-) : (options: CreateRemoteComponentOptions<T, E>) => (props: ComponentType) => React.JSX.Element
+  createLazyComponentFn: typeof createLazyComponent<T, E>,
+) : (options: CreateLazyComponentOptions<T, E>) => (props: ComponentType) => React.JSX.Element
 ```
 </Collapse>
 
@@ -443,11 +438,11 @@ declare function wrapNoSSR<T, E extends keyof T>(
 使用示例：
 
 ```tsx
-import { kit } from '@module-federation/modern-js/runtime';
-
-const { createRemoteComponent, wrapNoSSR } = kit;
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent, wrapNoSSR } from '@module-federation/modern-js/runtime';
 
-const RemoteComponent = wrapNoSSR(createRemoteComponent)({
+const LazyComponent = wrapNoSSR(createLazyComponent)({
+  instance: getInstance(),
   loader: () => {
     return import('remote/Content');
   },
@@ -467,7 +462,7 @@ const Index = (): JSX.Element => {
       <h1>
         The component will be render in csr.
       </h1>
-      <RemoteComponent />
+      <LazyComponent />
     </div>
   );
 };
diff --git a/apps/website-new/docs/zh/practice/bridge/index.mdx b/apps/website-new/docs/zh/practice/bridge/index.mdx
index e009a9d8d04..eb82a0ba177 100644
--- a/apps/website-new/docs/zh/practice/bridge/index.mdx
+++ b/apps/website-new/docs/zh/practice/bridge/index.mdx
@@ -28,12 +28,15 @@
 > 用于创建 React 应用类型模块导出，如果你的应用是 React 类型 且希望作为应用类型模块被另一个 MF 应用加载，那么你应该使用它为你的应用创造符合规范的导出。
 
 
-- createRemoteComponent
+- createRemoteAppComponent
 
-> 用于在 React 应用中加载应用类型模块，所加载的模块必须被 `createBridgeComponent` 所包裹，`createRemoteComponent` 将自动在你的应用中创建渲染上下文以保证模块能正常工作。
+> 用于在 React 应用中加载应用类型模块，所加载的模块必须被 `createBridgeComponent` 所包裹，`createRemoteAppComponent` 将自动在你的应用中创建渲染上下文以保证模块能正常工作。
 
 `@module-federation/bridge-react` 的使用见 [Host demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-host-2000)、[Remote demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-remote2-2002)。
 
+- createRemoteComponent
+
+> 此 API 即将废弃，请使用 `createRemoteAppComponent` 代替。
 
 ### @module-federation/bridge-vue3
 
@@ -45,9 +48,9 @@
 
 > 用于创建 Vue 应用类型模块导出，如果你的应用是 Vue v3 类型 且希望作为应用类型模块被另一个 MF 应用加载，那么你应该使用它为你的应用创造符合规范的导出。
 
-- createRemoteComponent
+- createRemoteAppComponent
 
-> 用于在 Vue 应用中加载应用类型模块，所加载的模块必须被 `createBridgeComponent` 所包裹，`createRemoteComponent` 将自动在你的应用中创建渲染上下文以保证模块能正常工作。
+> 用于在 Vue 应用中加载应用类型模块，所加载的模块必须被 `createBridgeComponent` 所包裹，`createRemoteAppComponent` 将自动在你的应用中创建渲染上下文以保证模块能正常工作。
 
 ## FAQ
 
diff --git a/apps/website-new/docs/zh/practice/bridge/react-bridge.mdx b/apps/website-new/docs/zh/practice/bridge/react-bridge.mdx
index a28c8d4261f..ae4956f04ef 100644
--- a/apps/website-new/docs/zh/practice/bridge/react-bridge.mdx
+++ b/apps/website-new/docs/zh/practice/bridge/react-bridge.mdx
@@ -2,7 +2,7 @@
 
 `@module-federation/bridge-react` 提供了用于 React 应用的 bridge 工具函数：
 - `createBridgeComponent`：用于导出应用级别模块，适用于生产者包装其作为应用类型导出的模块
-- `createRemoteComponent`：用于加载应用级别模块，适用于消费者加载作为应用类型加载的模块
+- `createRemoteAppComponent`：用于加载应用级别模块，适用于消费者加载作为应用类型加载的模块
 
 ## React 版本兼容性
 
@@ -130,11 +130,11 @@ export default defineConfig({
 
 **步骤 2**: 加载远程应用
 
-在消费者项目中，我们需要使用 `createRemoteComponent` 来加载应用类型模块：
+在消费者项目中，我们需要使用 `createRemoteAppComponent` 来加载应用类型模块：
 
 ```tsx
 // ./src/App.tsx
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 import { loadRemote } from '@module-federation/runtime';
 
 // 定义错误回退组件
@@ -153,8 +153,8 @@ const FallbackErrorComp = ({ error }) => {
 // 定义加载中组件
 const FallbackComp = <div data-test-id="loading">加载中...</div>;
 
-// 使用 createRemoteComponent 创建远程组件
-const Remote1App = createRemoteComponent({
+// 使用 createRemoteAppComponent 创建远程组件
+const Remote1App = createRemoteAppComponent({
   // loader 用于加载远程模块，例如：loadRemote('remote1/export-app')，import('remote1/export-app')
   loader: () => loadRemote('remote1/export-app'),
   // fallback 用于在远程模块加载失败时显示的组件
@@ -191,8 +191,8 @@ const App = () => {
 
 **关于远程组件加载**
 
-1. 通过 `createRemoteComponent` 导出的远程模块将自动使用 react-bridge 加载协议加载模块，使得应用的跨框架渲染成为可能。
-2. 此外，`createRemoteComponent` 将自动处理模块加载、模块销毁、错误处理、加载中、路由等逻辑，让开发者只需要关注如何使用远程组件。
+1. 通过 `createRemoteAppComponent` 导出的远程模块将自动使用 react-bridge 加载协议加载模块，使得应用的跨框架渲染成为可能。
+2. 此外，`createRemoteAppComponent` 将自动处理模块加载、模块销毁、错误处理、加载中、路由等逻辑，让开发者只需要关注如何使用远程组件。
 
 :::
 
@@ -221,8 +221,8 @@ function createBridgeComponent<T>(
 interface ProviderFnParams<T> {
   /** 要远程加载的根组件 */
   rootComponent: React.ComponentType<T>;
-  
-  /** 
+
+  /**
    * 自定义渲染函数，用于自定义渲染逻辑
    * @param App - React 元素
    * @param id - DOM 元素或字符串 ID
@@ -232,8 +232,8 @@ interface ProviderFnParams<T> {
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
-  
-  /** 
+
+  /**
    * 自定义 createRoot 函数，用于 React 18 及以上版本
    * @param container - DOM 容器
    * @param options - CreateRoot 选项
@@ -243,7 +243,7 @@ interface ProviderFnParams<T> {
     container: Element | DocumentFragment,
     options?: CreateRootOptions,
   ) => Root;
-  
+
   /**
    * React 18 和 19 的 createRoot 默认选项
    * 这些选项将在创建根节点时使用，除非在渲染参数中被 rootOptions 覆盖
@@ -257,9 +257,9 @@ interface ProviderFnParams<T> {
 }
 ```
 
-### createRemoteComponent
+### createRemoteAppComponent
 
-`createRemoteComponent` 用于加载远程 React 组件。
+`createRemoteAppComponent` 用于加载远程 React 组件。
 
 ```tsx
 /**
@@ -267,7 +267,7 @@ interface ProviderFnParams<T> {
  * @param options - 远程组件配置选项
  * @returns 返回一个可以接收 props 并渲染远程组件的 React 组件
  */
-function createRemoteComponent<T, E extends keyof T = 'default'>(
+function createRemoteAppComponent<T, E extends keyof T = 'default'>(
   options: RemoteComponentParams<T, E>
 ): React.ForwardRefExoticComponent<
   React.PropsWithoutRef<RemoteComponentProps> & React.RefAttributes<HTMLDivElement>
@@ -280,19 +280,19 @@ interface RemoteComponentParams<
   T = Record<string, unknown>,
   E extends keyof T = keyof T
 > {
-  /** 
+  /**
    * 加载远程模块的函数
    * 例如：() => loadRemote('remote1/export-app') 或 () => import('remote1/export-app')
    */
   loader: () => Promise<T>;
-  
+
   /** 加载远程模块时显示的组件 */
   loading: React.ReactNode;
-  
+
   /** 加载或渲染远程模块失败时显示的错误组件 */
   fallback: React.ComponentType<{ error: Error }>;
-  
-  /** 
+
+  /**
    * 指定模块导出名称
    * 默认为 'default'
    */
@@ -306,18 +306,18 @@ interface RemoteComponentProps<T = Record<string, unknown>> {
   /** 传递给远程组件的属性 */
   props?: T;
 
-  /** 
+  /**
    * 内存路由配置，用于将子应用路由作为 memoryRouter 控制
    * 不会直接在浏览器地址栏中显示 URL
    */
   memoryRoute?: { entryPath: string };
-  
+
   /** 基础路径名 */
   basename?: string;
-  
+
   /** 样式 */
   style?: React.CSSProperties;
-  
+
   /** 类名 */
   className?: string;
 }
@@ -334,7 +334,7 @@ export const provider = createBridgeComponent({
 });
 
 // 宿主应用
-const Remote1App = createRemoteComponent({
+const Remote1App = createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
   export: 'provider', // 指定使用 provider 导出
   fallback: FallbackErrorComp,
@@ -396,15 +396,15 @@ export default createBridgeComponent({
 
 ```tsx
 // 在消费者应用中
-const RemoteApp = createRemoteComponent({
+const RemoteApp = createRemoteAppComponent({
   url: 'http://localhost:3001/remoteEntry.js',
   scope: 'remote',
   module: './App',
 });
 
 // 在渲染时传递 rootOptions
-<RemoteApp 
-  props={{ message: 'Hello' }} 
+<RemoteApp
+  props={{ message: 'Hello' }}
   rootOptions={{
     identifierPrefix: 'instance-',
     onRecoverableError: (error) => {
diff --git a/apps/website-new/docs/zh/practice/bridge/vue-bridge.mdx b/apps/website-new/docs/zh/practice/bridge/vue-bridge.mdx
index a6960a06c71..c008ba4e567 100644
--- a/apps/website-new/docs/zh/practice/bridge/vue-bridge.mdx
+++ b/apps/website-new/docs/zh/practice/bridge/vue-bridge.mdx
@@ -1,6 +1,6 @@
 # Vue Bridge（for Vue v3）
 
-`@module-federation/bridge-vue3` 提供了用于 Vue V3 应用的 `bridge` 工具函数，其提供的 `createBridgeComponent` 可用于导出应用级别模块，`createRemoteComponent` 用于加载应用级别模块。[Demo](https://github.com/module-federation/core/tree/main/apps/router-demo)
+`@module-federation/bridge-vue3` 提供了用于 Vue V3 应用的 `bridge` 工具函数，其提供的 `createBridgeComponent` 可用于导出应用级别模块，`createRemoteAppComponent` 用于加载应用级别模块。[Demo](https://github.com/module-federation/core/tree/main/apps/router-demo)
 
 ### 安装
 
@@ -18,7 +18,7 @@ import { PackageManagerTabs } from '@theme';
 ### 类型
 
 ```tsx
-function createRemoteComponent<T, E extends keyof T>(
+function createRemoteAppComponent<T, E extends keyof T>(
   options: {
     // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
     loader: () => Promise<T>;
@@ -119,7 +119,7 @@ export default defineConfig({
 // ./src/router.ts
 import * as bridge from '@module-federation/bridge-vue3';
 
-const Remote1 = bridge.createRemoteComponent({
+const Remote1 = bridge.createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
 });
 
@@ -137,10 +137,10 @@ export default router;
 
 ### 方法
 
-#### createRemoteComponent
+#### createRemoteAppComponent
 
 ```tsx
-function createRemoteComponent<T, E extends keyof T>(
+function createRemoteAppComponent<T, E extends keyof T>(
   options: {
     // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
     loader: () => Promise<T>;
@@ -159,7 +159,7 @@ function createRemoteComponent<T, E extends keyof T>(
 
 
 ```tsx
-const Remote1App = createRemoteComponent({ loader: () => loadRemote('remote1/export-app') });
+const Remote1App = createRemoteAppComponent({ loader: () => loadRemote('remote1/export-app') });
 ```
 
 * `options`
@@ -182,7 +182,7 @@ export const provider = createBridgeComponent({
 });
 
 // host
-const Remote1App = createRemoteComponent({
+const Remote1App = createRemoteAppComponent({
   loader: () => loadRemote('remote1/export-app'),
   export: 'provider'
 });
@@ -195,7 +195,7 @@ const Remote1App = createRemoteComponent({
 ```tsx
 import * as bridge from '@module-federation/bridge-vue3';
 
-const Remote2 = bridge.createRemoteComponent({ loader: () => loadRemote('remote1/export-app'), rootAttrs: {class: 'root-element-class'} });
+const Remote2 = bridge.createRemoteAppComponent({ loader: () => loadRemote('remote1/export-app'), rootAttrs: {class: 'root-element-class'} });
 
 const router = createRouter({
   history: createWebHistory(),
diff --git a/apps/website-new/docs/zh/practice/frameworks/modern/dynamic-remote.mdx b/apps/website-new/docs/zh/practice/frameworks/modern/dynamic-remote.mdx
index a8a1b1b0895..649b8e44960 100644
--- a/apps/website-new/docs/zh/practice/frameworks/modern/dynamic-remote.mdx
+++ b/apps/website-new/docs/zh/practice/frameworks/modern/dynamic-remote.mdx
@@ -144,16 +144,16 @@ export const loader = async ({ request }: LoaderFunctionArgs): Promise<DataLoade
 消费 loader 数据，并动态加载对应的生产者：
 
 ```tsx
-import { kit, loadRemote, registerRemotes } from '@module-federation/modern-js/runtime';
+import { loadRemote, registerRemotes, getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent } from '@module-federation/modern-js/react';
 // 使用 import type ，仅获取类型
 import type { DataLoaderRes } from './page.data';
 import { useLoaderData } from '@modern-js/runtime/router';
 
 import './index.css';
 
-const { createRemoteSSRComponent } = kit;
-
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: 'loading...',
   export: 'default',
@@ -173,7 +173,8 @@ const Index = () => {
 
   const DynamicRemoteSSRComponents = dataLoader.providerList.map(item => {
     const { id } = item;
-    const Com = createRemoteSSRComponent({
+    const Com = createLazyComponent({
+      instance: getInstance(),
       loader: () => loadRemote(id),
       loading: 'loading...',
       fallback: ({ error }) => {
diff --git a/apps/website-new/docs/zh/practice/frameworks/modern/index.mdx b/apps/website-new/docs/zh/practice/frameworks/modern/index.mdx
index 43116228018..6e7408f1b91 100644
--- a/apps/website-new/docs/zh/practice/frameworks/modern/index.mdx
+++ b/apps/website-new/docs/zh/practice/frameworks/modern/index.mdx
@@ -257,12 +257,12 @@ export default Index;
 修改消费者引用生产者处的代码（`src/routes/page.tsx`）：
 
 ```tsx title='page.tsx'
-import { kit } from '@module-federation/modern-js/runtime'
+import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent } from '@module-federation/modern-js/react'
 import './index.css';
 
-const { createRemoteSSRComponent } = kit;
-
-const RemoteSSRComponent = createRemoteSSRComponent({
+const RemoteSSRComponent = createLazyComponent({
+  instance: getInstance(),
   loader: () => import('remote/Image'),
   loading: 'loading...',
   export: 'default',
diff --git a/packages/bridge/bridge-react/__tests__/bridge.spec.tsx b/packages/bridge/bridge-react/__tests__/bridge.spec.tsx
index b09fbdf6314..9e29a1b59a2 100644
--- a/packages/bridge/bridge-react/__tests__/bridge.spec.tsx
+++ b/packages/bridge/bridge-react/__tests__/bridge.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { assert, describe, it } from 'vitest';
-import { createBridgeComponent, createRemoteComponent } from '../src';
+import { createBridgeComponent, createRemoteAppComponent } from '../src';
 import {
   act,
   fireEvent,
@@ -44,14 +44,14 @@ describe('bridge', () => {
     expect(document.querySelector('#container')!.innerHTML).toContain('');
   });
 
-  it('createRemoteComponent', async () => {
+  it('createRemoteAppComponent', async () => {
     function Component({ props }: { props?: Record<string, any> }) {
       return <div>life cycle render {props?.msg}</div>;
     }
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
     });
-    const RemoteComponent = createRemoteComponent({
+    const RemoteComponent = createRemoteAppComponent({
       loader: async () => {
         return {
           default: BridgeComponent,
@@ -71,7 +71,7 @@ describe('bridge', () => {
     expect(getHtml(container)).toMatch('hello world');
   });
 
-  it('createRemoteComponent and obtain ref property', async () => {
+  it('createRemoteAppComponent and obtain ref property', async () => {
     const ref = {
       current: null,
     };
@@ -82,7 +82,7 @@ describe('bridge', () => {
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
     });
-    const RemoteComponent = createRemoteComponent({
+    const RemoteComponent = createRemoteAppComponent({
       loader: async () => {
         return {
           default: BridgeComponent,
@@ -103,7 +103,7 @@ describe('bridge', () => {
     expect(ref.current).not.toBeNull();
   });
 
-  it('createRemoteComponent with custom createRoot prop', async () => {
+  it('createRemoteAppComponent with custom createRoot prop', async () => {
     const renderMock = vi.fn();
 
     function Component({ props }: { props?: Record<string, any> }) {
@@ -118,7 +118,7 @@ describe('bridge', () => {
         };
       },
     });
-    const RemoteComponent = createRemoteComponent({
+    const RemoteComponent = createRemoteAppComponent({
       loader: async () => {
         return {
           default: BridgeComponent,
diff --git a/packages/bridge/bridge-react/package.json b/packages/bridge/bridge-react/package.json
index acf51b4684f..edc39092111 100644
--- a/packages/bridge/bridge-react/package.json
+++ b/packages/bridge/bridge-react/package.json
@@ -11,7 +11,6 @@
     "url": "https://github.com/module-federation/core",
     "directory": "packages/bridge-react"
   },
-  "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -51,8 +50,47 @@
       "import": "./dist/router-v6.es.js",
       "require": "./dist/router-v6.cjs.js"
     },
+    "./lazy-utils": {
+      "types": "./dist/lazy-utils.d.ts",
+      "import": "./dist/lazy-utils.es.js",
+      "require": "./dist/lazy-utils.cjs.js"
+    },
+    "./data-fetch-utils": {
+      "types": "./dist/data-fetch-utils.d.ts",
+      "import": "./dist/data-fetch-utils.es.js",
+      "require": "./dist/data-fetch-utils.cjs.js"
+    },
+    "./data-fetch-server-middleware": {
+      "types": "./dist/data-fetch-server-middleware.d.ts",
+      "import": "./dist/data-fetch-server-middleware.es.js",
+      "require": "./dist/data-fetch-server-middleware.cjs.js"
+    },
+    "./lazy-load-component-plugin": {
+      "types": "./dist/lazy-load-component-plugin.d.ts",
+      "import": "./dist/lazy-load-component-plugin.es.js",
+      "require": "./dist/lazy-load-component-plugin.cjs.js"
+    },
     "./*": "./*"
   },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/index.d.ts"
+      ],
+      "lazy-load-component-plugin": [
+        "./dist/lazy-load-component-plugin.d.ts"
+      ],
+      "lazy-utils": [
+        "./dist/lazy-utils.d.ts"
+      ],
+      "data-fetch-utils": [
+        "./dist/data-fetch-utils.d.ts"
+      ],
+      "data-fetch-server-middleware": [
+        "./dist/data-fetch-server-middleware.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -61,7 +99,8 @@
   "dependencies": {
     "@module-federation/bridge-shared": "workspace:*",
     "@module-federation/sdk": "workspace:*",
-    "react-error-boundary": "^4.1.2"
+    "react-error-boundary": "^4.1.2",
+    "lru-cache": "^10.4.3"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -82,6 +121,8 @@
     "typescript": "^5.2.2",
     "vite": "^5.4.18",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "workspace:*"
+    "@module-federation/runtime": "workspace:*",
+    "@module-federation/runtime-core": "workspace:*",
+    "hono": "3.12.12"
   }
 }
diff --git a/packages/bridge/bridge-react/src/.eslintrc.js b/packages/bridge/bridge-react/src/.eslintrc.js
deleted file mode 100644
index fafc0032305..00000000000
--- a/packages/bridge/bridge-react/src/.eslintrc.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// eslint-disable-next-line import/no-commonjs
-module.exports = {
-  root: true,
-  extends: ['@modern-js-app'],
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: ['../tsconfig.json'],
-  },
-};
diff --git a/packages/bridge/bridge-react/src/index.ts b/packages/bridge/bridge-react/src/index.ts
index ef312515bc2..4e04c1011f3 100644
--- a/packages/bridge/bridge-react/src/index.ts
+++ b/packages/bridge/bridge-react/src/index.ts
@@ -3,7 +3,30 @@
  * This file provides support for React 16 and 17 versions, using the traditional ReactDOM.render API
  */
 export { createBridgeComponent } from './provider/versions/legacy';
-export { createRemoteComponent } from './remote/create';
+export {
+  createRemoteComponent,
+  createRemoteAppComponent,
+} from './remote/create';
+export {
+  ERROR_TYPE,
+  createLazyComponent,
+  collectSSRAssets,
+  // wrapNoSSR,
+  callDataFetch,
+  setSSREnv,
+  autoFetchDataPlugin,
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+  prefetch,
+} from './lazy';
+
+export { lazyLoadComponentPlugin } from './plugins/lazy-load-component-plugin';
+
 export type { CreateRootOptions, Root } from './provider/versions/legacy';
 export type {
   ProviderParams,
@@ -12,3 +35,11 @@ export type {
   DestroyParams,
   RenderParams,
 } from './types';
+export type {
+  DataFetchParams,
+  NoSSRRemoteInfo,
+  CollectSSRAssetsOptions,
+  CreateLazyComponentOptions,
+  CacheStatus,
+  CacheStatsInfo,
+} from './lazy';
diff --git a/packages/modernjs/src/runtime/AwaitDataFetch.tsx b/packages/bridge/bridge-react/src/lazy/AwaitDataFetch.tsx
similarity index 81%
rename from packages/modernjs/src/runtime/AwaitDataFetch.tsx
rename to packages/bridge/bridge-react/src/lazy/AwaitDataFetch.tsx
index 821b05154c5..a520e99601e 100644
--- a/packages/modernjs/src/runtime/AwaitDataFetch.tsx
+++ b/packages/bridge/bridge-react/src/lazy/AwaitDataFetch.tsx
@@ -1,14 +1,20 @@
-import React, { MutableRefObject, ReactNode, Suspense, useRef } from 'react';
-import logger from '../logger';
+import React, {
+  MutableRefObject,
+  ReactNode,
+  Suspense,
+  useRef,
+  useState,
+} from 'react';
+import logger from './logger';
 import {
   DATA_FETCH_ERROR_PREFIX,
   LOAD_REMOTE_ERROR_PREFIX,
   ERROR_TYPE,
-  DOWNGRADE_KEY,
   DATA_FETCH_FUNCTION,
-} from '../constant';
-import { getDataFetchIdWithErrorMsgs, wrapDataFetchId } from '../utils';
-import type { DataFetchParams } from '../interfaces/global';
+} from './constant';
+
+import { getDataFetchIdWithErrorMsgs, wrapDataFetchId } from './utils';
+import type { DataFetchParams } from './types';
 
 function isPromise<T>(obj: any): obj is PromiseLike<T> {
   return (
@@ -63,6 +69,7 @@ export const transformError = (err: string | Error): ErrorInfo => {
 export interface AwaitProps<T> {
   resolve: T | Promise<T>;
   loading?: ReactNode;
+  delayLoading?: number;
   errorElement?: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
   children: (data: T) => ReactNode;
   params?: DataFetchParams;
@@ -82,6 +89,7 @@ export function AwaitDataFetch<T>({
   errorElement = DefaultErrorElement,
   children,
   params,
+  delayLoading,
 }: AwaitProps<T>) {
   const dataRef = useRef<T>();
   const data = dataRef.current || resolve;
@@ -92,7 +100,8 @@ export function AwaitDataFetch<T>({
       params={params}
       loading={loading}
       errorElement={errorElement}
-      // @ts-ignore
+      delayLoading={delayLoading}
+      // @ts-expect-error
       resolve={getData}
     >
       {children}
@@ -100,14 +109,43 @@ export function AwaitDataFetch<T>({
   );
 }
 
+export const DelayedLoading = ({
+  delayLoading,
+  children,
+}: {
+  delayLoading?: number;
+  children: ReactNode;
+}) => {
+  const [show, setShow] = useState(false);
+  const timerSet = useRef(false);
+
+  if (!delayLoading) {
+    return children;
+  }
+
+  if (typeof window !== 'undefined' && !show && !timerSet.current) {
+    timerSet.current = true;
+    setTimeout(() => {
+      setShow(true);
+    }, delayLoading);
+  }
+
+  return show ? children : null;
+};
+
 function AwaitSuspense<T>({
   resolve,
   children,
   loading = DefaultLoading,
   errorElement = DefaultErrorElement,
+  delayLoading,
 }: AwaitErrorHandlerProps<T>) {
   return (
-    <Suspense fallback={loading}>
+    <Suspense
+      fallback={
+        <DelayedLoading delayLoading={delayLoading}>{loading}</DelayedLoading>
+      }
+    >
       <ResolveAwait resolve={resolve} errorElement={errorElement}>
         {children}
       </ResolveAwait>
@@ -132,6 +170,7 @@ function ResolveAwait<T>({
             {globalThis.FEDERATION_SSR && (
               <script
                 suppressHydrationWarning
+                // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{
                   __html: String.raw`
                   globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}']  || []
diff --git a/packages/bridge/bridge-react/src/lazy/constant.ts b/packages/bridge/bridge-react/src/lazy/constant.ts
new file mode 100644
index 00000000000..c6b718ce1ac
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/constant.ts
@@ -0,0 +1,30 @@
+export const PLUGIN_IDENTIFIER = '[ Module Federation React ]';
+export const DOWNGRADE_KEY = '_mfSSRDowngrade';
+export const DATA_FETCH_MAP_KEY = '__MF_DATA_FETCH_MAP__';
+export const DATA_FETCH_FUNCTION = '_mfDataFetch';
+export const FS_HREF = '_mfFSHref';
+export const ERROR_TYPE = {
+  DATA_FETCH: 1,
+  LOAD_REMOTE: 2,
+  UNKNOWN: 3,
+};
+export const WRAP_DATA_FETCH_ID_IDENTIFIER = 'wrap_dfip_identifier';
+export const enum MF_DATA_FETCH_TYPE {
+  FETCH_SERVER = 1,
+  FETCH_CLIENT = 2,
+}
+
+export const enum MF_DATA_FETCH_STATUS {
+  LOADED = 1,
+  LOADING = 2,
+  AWAIT = 0,
+  ERROR = 3,
+}
+
+export const DATA_FETCH_IDENTIFIER = 'data';
+export const DATA_FETCH_CLIENT_SUFFIX = '.client';
+export const DATA_FETCH_QUERY = 'x-mf-data-fetch';
+export const DATA_FETCH_ERROR_PREFIX =
+  'caught the following error during dataFetch: ';
+export const LOAD_REMOTE_ERROR_PREFIX =
+  'caught the following error during loadRemote: ';
diff --git a/packages/modernjs/src/runtime/createRemoteComponent.tsx b/packages/bridge/bridge-react/src/lazy/createLazyComponent.tsx
similarity index 82%
rename from packages/modernjs/src/runtime/createRemoteComponent.tsx
rename to packages/bridge/bridge-react/src/lazy/createLazyComponent.tsx
index a9075463748..bf2aee3d0ed 100644
--- a/packages/modernjs/src/runtime/createRemoteComponent.tsx
+++ b/packages/bridge/bridge-react/src/lazy/createLazyComponent.tsx
@@ -1,47 +1,63 @@
-import React, { ReactNode, useEffect, useState } from 'react';
-import logger from '../logger';
-import { getInstance } from '@module-federation/enhanced/runtime';
-import { AwaitDataFetch, transformError } from './AwaitDataFetch';
+import type { FederationHost, getInstance } from '@module-federation/runtime';
+import type { BasicProviderModuleInfo } from '@module-federation/sdk';
+import React, { ReactNode, useState, useEffect } from 'react';
+import type { ErrorInfo } from './AwaitDataFetch';
+import type { DataFetchParams, NoSSRRemoteInfo } from './types';
+
+import logger from './logger';
+import {
+  AwaitDataFetch,
+  DelayedLoading,
+  transformError,
+} from './AwaitDataFetch';
 import {
   fetchData,
   getDataFetchItem,
   getDataFetchMapKey,
-} from '../utils/dataFetch';
-import {
   getDataFetchInfo,
   getLoadedRemoteInfos,
   setDataFetchItemLoadedStatus,
   wrapDataFetchId,
-} from '../utils';
+} from './utils';
 import {
   DATA_FETCH_ERROR_PREFIX,
   DATA_FETCH_FUNCTION,
   FS_HREF,
   LOAD_REMOTE_ERROR_PREFIX,
   MF_DATA_FETCH_TYPE,
-} from '../constant';
-import type { ErrorInfo } from './AwaitDataFetch';
-import type { DataFetchParams, NoSSRRemoteInfo } from '../interfaces/global';
+} from './constant';
 
-type IProps = {
+export type IProps = {
   id: string;
+  instance: ReturnType<typeof getInstance>;
   injectScript?: boolean;
   injectLink?: boolean;
 };
 
-export type CreateRemoteComponentOptions<T, E extends keyof T> = {
+export type CreateLazyComponentOptions<T, E extends keyof T> = {
   loader: () => Promise<T>;
+  instance: ReturnType<typeof getInstance>;
   loading: React.ReactNode;
+  delayLoading?: number;
   fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
   export?: E;
   dataFetchParams?: DataFetchParams;
   noSSR?: boolean;
+  cacheData?: boolean;
 };
 
 type ReactKey = { key?: React.Key | null };
 
-function getTargetModuleInfo(id: string) {
-  const instance = getInstance();
+function getTargetModuleInfo(
+  id: string,
+  instance?: FederationHost,
+):
+  | {
+      module: BasicProviderModuleInfo['modules'][0];
+      publicPath: string;
+      remoteEntry: string;
+    }
+  | undefined {
   if (!instance) {
     return;
   }
@@ -49,11 +65,11 @@ function getTargetModuleInfo(id: string) {
   if (!loadedRemoteInfo) {
     return;
   }
-  const snapshot = loadedRemoteInfo.snapshot;
+  const { snapshot } = loadedRemoteInfo;
   if (!snapshot) {
     return;
   }
-  const publicPath =
+  const publicPath: string =
     'publicPath' in snapshot
       ? snapshot.publicPath
       : 'getPublicPath' in snapshot
@@ -89,12 +105,12 @@ export function collectSSRAssets(options: IProps) {
   } = typeof options === 'string' ? { id: options } : options;
   const links: React.ReactNode[] = [];
   const scripts: React.ReactNode[] = [];
-  const instance = getInstance();
+  const instance = options.instance;
   if (!instance || (!injectLink && !injectScript)) {
     return [...scripts, ...links];
   }
 
-  const moduleAndPublicPath = getTargetModuleInfo(id);
+  const moduleAndPublicPath = getTargetModuleInfo(id, instance);
   if (!moduleAndPublicPath) {
     return [...scripts, ...links];
   }
@@ -186,12 +202,18 @@ function getServerNeedRemoteInfo(
       globalName: loadedRemoteInfo.entryGlobalName,
     };
   }
-  return;
+  return undefined;
 }
 
-export function createRemoteComponent<T, E extends keyof T>(
-  options: CreateRemoteComponentOptions<T, E>,
+export function createLazyComponent<T, E extends keyof T>(
+  options: CreateLazyComponentOptions<T, E>,
 ) {
+  const { instance, cacheData } = options;
+  if (!instance) {
+    throw new Error('instance is required for createLazyComponent!');
+  }
+  let dataCache: unknown = null;
+
   type ComponentType = T[E] extends (...args: any) => any
     ? Parameters<T[E]>[0] extends undefined
       ? ReactKey
@@ -213,7 +235,6 @@ export function createRemoteComponent<T, E extends keyof T>(
   const getData = async (noSSR?: boolean) => {
     let loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>;
     let moduleId: string;
-    const instance = getInstance();
     try {
       const m = await callLoader();
       moduleId = m && m[Symbol.for('mf_module_id')];
@@ -238,7 +259,7 @@ export function createRemoteComponent<T, E extends keyof T>(
           id: moduleId,
           remoteSnapshot: loadedRemoteInfo.snapshot,
         }),
-        { name: instance!.name, version: instance?.options.version },
+        { name: instance.name, version: instance.options.version },
       );
       logger.debug('getData dataFetchMapKey: ', dataFetchMapKey);
       if (!dataFetchMapKey) {
@@ -254,6 +275,7 @@ export function createRemoteComponent<T, E extends keyof T>(
       );
       setDataFetchItemLoadedStatus(dataFetchMapKey);
       logger.debug('get data res: \n', data);
+      dataCache = data;
       return data;
     } catch (err) {
       const errMsg = `${DATA_FETCH_ERROR_PREFIX}${wrapDataFetchId(dataFetchMapKey)}${err}`;
@@ -265,7 +287,6 @@ export function createRemoteComponent<T, E extends keyof T>(
   const LazyComponent = React.lazy(async () => {
     const m = await callLoader();
     const moduleId = m && m[Symbol.for('mf_module_id')];
-    const instance = getInstance()!;
     const loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
     loadedRemoteInfo?.snapshot;
     const dataFetchMapKey = loadedRemoteInfo
@@ -283,6 +304,7 @@ export function createRemoteComponent<T, E extends keyof T>(
 
     const assets = collectSSRAssets({
       id: moduleId,
+      instance,
     });
 
     const Com = m[exportName] as React.FC<ComponentType>;
@@ -306,6 +328,7 @@ export function createRemoteComponent<T, E extends keyof T>(
           </>
         ),
       };
+      // eslint-disable-next-line max-lines
     } else {
       throw Error(
         `Make sure that ${moduleId} has the correct export when export is ${String(
@@ -317,16 +340,20 @@ export function createRemoteComponent<T, E extends keyof T>(
 
   return (props: ComponentType) => {
     const { key, ...args } = props;
-    if (globalThis.FEDERATION_SSR && !options.noSSR) {
-      const { key, ...args } = props;
+    if (cacheData && dataCache) {
+      // @ts-expect-error ignore
+      return <LazyComponent {...args} mfData={dataCache} />;
+    }
 
+    if (!options.noSSR) {
       return (
         <AwaitDataFetch
           resolve={getData(options.noSSR)}
           loading={options.loading}
+          delayLoading={options.delayLoading}
           errorElement={options.fallback}
         >
-          {/* @ts-ignore */}
+          {/* @ts-expect-error ignore */}
           {(data) => <LazyComponent {...args} mfData={data} />}
         </AwaitDataFetch>
       );
@@ -345,9 +372,9 @@ export function createRemoteComponent<T, E extends keyof T>(
             if (isMounted) {
               setData(result);
             }
-          } catch (e: any) {
+          } catch (e) {
             if (isMounted) {
-              setError(transformError(e));
+              setError(transformError(e as Error));
             }
           } finally {
             if (isMounted) {
@@ -364,7 +391,11 @@ export function createRemoteComponent<T, E extends keyof T>(
       }, []);
 
       if (loading) {
-        return <>{options.loading}</>;
+        return (
+          <DelayedLoading delayLoading={options.delayLoading}>
+            {options.loading}
+          </DelayedLoading>
+        );
       }
 
       if (error) {
@@ -376,20 +407,8 @@ export function createRemoteComponent<T, E extends keyof T>(
           </>
         );
       }
-      // @ts-ignore
+      // @ts-expect-error ignore
       return <LazyComponent {...args} mfData={data} />;
     }
   };
 }
-
-/**
- * @deprecated createRemoteSSRComponent is deprecated, please use createRemoteComponent instead!
- */
-export function createRemoteSSRComponent<T, E extends keyof T>(
-  options: CreateRemoteComponentOptions<T, E>,
-) {
-  logger.warn(
-    'createRemoteSSRComponent is deprecated, please use createRemoteComponent instead!',
-  );
-  return createRemoteComponent(options);
-}
diff --git a/packages/bridge/bridge-react/src/lazy/data-fetch/cache.ts b/packages/bridge/bridge-react/src/lazy/data-fetch/cache.ts
new file mode 100644
index 00000000000..377ec86c482
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/data-fetch/cache.ts
@@ -0,0 +1,296 @@
+import { LRUCache } from 'lru-cache';
+import { getDataFetchCache } from '../utils';
+
+import type {
+  CacheConfig,
+  CacheItem,
+  DataFetch,
+  DataFetchParams,
+} from '../types';
+
+export const CacheSize = {
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024 * 1024,
+} as const;
+
+export const CacheTime = {
+  SECOND: 1000,
+  MINUTE: 60 * 1000,
+  HOUR: 60 * 60 * 1000,
+  DAY: 24 * 60 * 60 * 1000,
+  WEEK: 7 * 24 * 60 * 60 * 1000,
+  MONTH: 30 * 24 * 60 * 60 * 1000,
+} as const;
+
+export type CacheStatus = 'hit' | 'stale' | 'miss';
+
+export interface CacheStatsInfo {
+  status: CacheStatus;
+  key: string | symbol;
+  params: DataFetchParams;
+  result: any;
+}
+
+interface CacheOptions {
+  tag?: string | string[];
+  maxAge?: number;
+  revalidate?: number;
+  getKey?: <Args extends any[]>(...args: Args) => string;
+  customKey?: <Args extends any[]>(options: {
+    params: Args;
+    fn: (...args: Args) => any;
+    generatedKey: string;
+  }) => string | symbol;
+  onCache?: (info: CacheStatsInfo) => boolean;
+}
+
+function getTagKeyMap() {
+  const dataFetchCache = getDataFetchCache();
+  if (!dataFetchCache || !dataFetchCache.tagKeyMap) {
+    const tagKeyMap = new Map<string, Set<string>>();
+    globalThis.__MF_DATA_FETCH_CACHE__ ||= {};
+    globalThis.__MF_DATA_FETCH_CACHE__.tagKeyMap = tagKeyMap;
+    return tagKeyMap;
+  }
+  return dataFetchCache.tagKeyMap;
+}
+
+function addTagKeyRelation(tag: string, key: string) {
+  const tagKeyMap = getTagKeyMap();
+  let keys = tagKeyMap.get(tag);
+  if (!keys) {
+    keys = new Set();
+    tagKeyMap.set(tag, keys);
+  }
+  keys.add(key);
+}
+
+function getCacheConfig() {
+  const dataFetchCache = getDataFetchCache();
+  if (!dataFetchCache || !dataFetchCache.cacheConfig) {
+    const cacheConfig: CacheConfig = {
+      maxSize: CacheSize.GB,
+    };
+    globalThis.__MF_DATA_FETCH_CACHE__ ||= {};
+    globalThis.__MF_DATA_FETCH_CACHE__.cacheConfig = cacheConfig;
+    return cacheConfig;
+  }
+  return dataFetchCache.cacheConfig;
+}
+
+export function configureCache(config: CacheConfig): void {
+  const cacheConfig = getCacheConfig();
+  Object.assign(cacheConfig, config);
+}
+
+function getLRUCache() {
+  const dataFetchCache = getDataFetchCache();
+  const cacheConfig = getCacheConfig();
+
+  if (!dataFetchCache || !dataFetchCache.cacheStore) {
+    const cacheStore = new LRUCache<string, Map<string, CacheItem<any>>>({
+      maxSize: cacheConfig.maxSize ?? CacheSize.GB,
+      sizeCalculation: (value: Map<string, CacheItem<any>>): number => {
+        if (!value.size) {
+          return 1;
+        }
+
+        let size = 0;
+        for (const [k, item] of value.entries()) {
+          size += k.length * 2;
+          size += estimateObjectSize(item.data);
+          size += 8;
+        }
+        return size;
+      },
+      updateAgeOnGet: true,
+      updateAgeOnHas: true,
+    });
+    globalThis.__MF_DATA_FETCH_CACHE__ ||= {};
+    globalThis.__MF_DATA_FETCH_CACHE__.cacheStore = cacheStore;
+    return cacheStore;
+  }
+
+  return dataFetchCache.cacheStore;
+}
+
+function estimateObjectSize(data: unknown): number {
+  const type = typeof data;
+
+  if (type === 'number') return 8;
+  if (type === 'boolean') return 4;
+  if (type === 'string') return Math.max((data as string).length * 2, 1);
+  if (data === null || data === undefined) return 1;
+
+  if (ArrayBuffer.isView(data)) {
+    return Math.max(data.byteLength, 1);
+  }
+
+  if (Array.isArray(data)) {
+    return Math.max(
+      data.reduce((acc, item) => acc + estimateObjectSize(item), 0),
+      1,
+    );
+  }
+
+  if (data instanceof Map || data instanceof Set) {
+    return 1024;
+  }
+
+  if (data instanceof Date) {
+    return 8;
+  }
+
+  if (type === 'object') {
+    return Math.max(
+      Object.entries(data).reduce(
+        (acc, [key, value]) => acc + key.length * 2 + estimateObjectSize(value),
+        0,
+      ),
+      1,
+    );
+  }
+
+  return 1;
+}
+
+export function generateKey(dataFetchOptions: DataFetchParams): string {
+  return JSON.stringify(dataFetchOptions, (_, value) => {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      return Object.keys(value)
+        .sort()
+        .reduce((result: Record<string, unknown>, key) => {
+          result[key] = value[key];
+          return result;
+        }, {});
+    }
+    return value;
+  });
+}
+
+export function cache<T>(
+  fn: DataFetch<T>,
+  options?: CacheOptions,
+): DataFetch<T> {
+  const {
+    tag = 'default',
+    maxAge = CacheTime.MINUTE * 5,
+    revalidate = 0,
+    onCache,
+    getKey,
+  } = options || {};
+
+  const tags = Array.isArray(tag) ? tag : [tag];
+
+  return async (dataFetchOptions) => {
+    // if downgrade, skip cache
+    if (dataFetchOptions.isDowngrade || !dataFetchOptions._id) {
+      return fn(dataFetchOptions);
+    }
+    const store = getLRUCache();
+
+    const now = Date.now();
+    const storeKey = dataFetchOptions._id;
+    const cacheKey = getKey
+      ? getKey(dataFetchOptions)
+      : generateKey(dataFetchOptions);
+
+    tags.forEach((t) => addTagKeyRelation(t, cacheKey));
+
+    let cacheStore = store.get(cacheKey);
+    if (!cacheStore) {
+      cacheStore = new Map();
+    }
+
+    const cached = cacheStore.get(storeKey);
+    if (cached) {
+      const age = now - cached.timestamp;
+
+      if (age < maxAge) {
+        if (onCache) {
+          const useCache = onCache({
+            status: 'hit',
+            key: cacheKey,
+            params: dataFetchOptions,
+            result: cached.data,
+          });
+          if (!useCache) {
+            return fn(dataFetchOptions);
+          }
+        }
+        return cached.data;
+      }
+
+      if (revalidate > 0 && age < maxAge + revalidate) {
+        if (onCache) {
+          onCache({
+            status: 'stale',
+            key: cacheKey,
+            params: dataFetchOptions,
+            result: cached.data,
+          });
+        }
+
+        if (!cached.isRevalidating) {
+          cached.isRevalidating = true;
+          Promise.resolve().then(async () => {
+            try {
+              const newData = await fn(dataFetchOptions);
+              cacheStore!.set(storeKey, {
+                data: newData,
+                timestamp: Date.now(),
+                isRevalidating: false,
+              });
+
+              store.set(cacheKey, cacheStore!);
+            } catch (error) {
+              cached.isRevalidating = false;
+              console.error('Background revalidation failed:', error);
+            }
+          });
+        }
+        return cached.data;
+      }
+    }
+
+    const data = await fn(dataFetchOptions);
+    cacheStore.set(storeKey, {
+      data,
+      timestamp: now,
+      isRevalidating: false,
+    });
+    store.set(cacheKey, cacheStore);
+
+    if (onCache) {
+      onCache({
+        status: 'miss',
+        key: cacheKey,
+        params: dataFetchOptions,
+        result: data,
+      });
+    }
+
+    return data;
+  };
+}
+
+export function revalidateTag(tag: string): void {
+  const tagKeyMap = getTagKeyMap();
+  const keys = tagKeyMap.get(tag);
+  const lruCache = getLRUCache();
+  if (keys) {
+    keys.forEach((key) => {
+      lruCache?.delete(key);
+    });
+  }
+}
+
+export function clearStore(): void {
+  const lruCache = getLRUCache();
+  const tagKeyMap = getTagKeyMap();
+
+  lruCache?.clear();
+  delete globalThis.__MF_DATA_FETCH_CACHE__?.cacheStore;
+  tagKeyMap.clear();
+}
diff --git a/packages/bridge/bridge-react/src/lazy/data-fetch/call-data-fetch.ts b/packages/bridge/bridge-react/src/lazy/data-fetch/call-data-fetch.ts
new file mode 100644
index 00000000000..b3aeb6849ec
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/data-fetch/call-data-fetch.ts
@@ -0,0 +1,13 @@
+import { DATA_FETCH_FUNCTION } from '../constant';
+import { dataFetchFunction } from './inject-data-fetch';
+
+export async function callDataFetch() {
+  const dataFetch = globalThis[DATA_FETCH_FUNCTION];
+  if (dataFetch) {
+    await Promise.all(
+      dataFetch.map(async (options) => {
+        await dataFetchFunction(options);
+      }),
+    );
+  }
+}
diff --git a/packages/bridge/bridge-react/src/lazy/data-fetch/data-fetch-server-middleware.ts b/packages/bridge/bridge-react/src/lazy/data-fetch/data-fetch-server-middleware.ts
new file mode 100644
index 00000000000..0054a0c473a
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/data-fetch/data-fetch-server-middleware.ts
@@ -0,0 +1,196 @@
+import { DATA_FETCH_QUERY, MF_DATA_FETCH_STATUS } from '../constant';
+import {
+  getDataFetchMap,
+  fetchData,
+  initDataFetchMap,
+  loadDataFetchModule,
+} from '../utils';
+import { SEPARATOR, MANIFEST_EXT } from '@module-federation/sdk';
+import logger from '../logger';
+
+import type { NoSSRRemoteInfo } from '../types';
+import type { MiddlewareHandler } from 'hono';
+
+function wrapSetTimeout(
+  targetPromise: Promise<unknown>,
+  delay = 20000,
+  id: string,
+) {
+  if (targetPromise && typeof targetPromise.then === 'function') {
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        logger.warn(`Data fetch for ID ${id} timed out after 20 seconds.`);
+        reject(new Error(`Data fetch for ID ${id} timed out after 20 seconds`));
+      }, delay);
+
+      targetPromise
+        .then((value: any) => {
+          clearTimeout(timeoutId);
+          resolve(value);
+        })
+        .catch((err: any) => {
+          clearTimeout(timeoutId);
+          reject(err);
+        });
+    });
+  }
+}
+
+function addProtocol(url: string) {
+  if (url.startsWith('//')) {
+    return 'https:' + url;
+  }
+  return url;
+}
+
+const getDecodeQuery = (url: URL, name: string) => {
+  const res = url.searchParams.get(name);
+  if (!res) {
+    return null;
+  }
+  return decodeURIComponent(res);
+};
+
+const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
+  let url: URL;
+  let dataFetchKey: string | null;
+  let params: Record<string, unknown>;
+  let remoteInfo: NoSSRRemoteInfo;
+  try {
+    url = new URL(ctx.req.url);
+    dataFetchKey = getDecodeQuery(url, DATA_FETCH_QUERY);
+    params = JSON.parse(getDecodeQuery(url, 'params') || '{}');
+    const remoteInfoQuery = getDecodeQuery(url, 'remoteInfo');
+    remoteInfo = remoteInfoQuery ? JSON.parse(remoteInfoQuery) : null;
+  } catch (e) {
+    logger.error('fetch data from server, error: ', e);
+    return next();
+  }
+
+  if (!dataFetchKey) {
+    return next();
+  }
+  logger.log('fetch data from server, dataFetchKey: ', dataFetchKey);
+  logger.debug(
+    'fetch data from server, moduleInfo: ',
+    globalThis.__FEDERATION__?.moduleInfo,
+  );
+  try {
+    const dataFetchMap = getDataFetchMap();
+    if (!dataFetchMap) {
+      initDataFetchMap();
+    }
+    const fetchDataPromise = dataFetchMap[dataFetchKey]?.[1];
+    logger.debug(
+      'fetch data from server, fetchDataPromise: ',
+      fetchDataPromise,
+    );
+    if (
+      fetchDataPromise &&
+      dataFetchMap[dataFetchKey]?.[2] !== MF_DATA_FETCH_STATUS.ERROR
+    ) {
+      const targetPromise = fetchDataPromise[0];
+      // Ensure targetPromise is thenable
+      const wrappedPromise = wrapSetTimeout(targetPromise, 20000, dataFetchKey);
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        logger.log('fetch data from server, fetchDataPromise res: ', res);
+        return ctx.json(res);
+      }
+      logger.error(
+        `Expected a Promise from fetchDataPromise[0] for dataFetchKey ${dataFetchKey}, but received:`,
+        targetPromise,
+        'Will try call new dataFetch again...',
+      );
+    }
+
+    if (remoteInfo) {
+      try {
+        const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+        const remoteEntry = `${addProtocol(remoteInfo.ssrPublicPath) + remoteInfo.ssrRemoteEntry}`;
+        if (!hostInstance) {
+          throw new Error('host instance not found!');
+        }
+        const remote = hostInstance.options.remotes.find(
+          (remote) => remote.name === remoteInfo.name,
+        );
+        logger.debug('find remote: ', JSON.stringify(remote));
+        if (!remote) {
+          hostInstance.registerRemotes([
+            {
+              name: remoteInfo.name,
+              entry: remoteEntry,
+              entryGlobalName: remoteInfo.globalName,
+            },
+          ]);
+        } else if (
+          !('entry' in remote) ||
+          !remote.entry.includes(MANIFEST_EXT)
+        ) {
+          const { hostGlobalSnapshot, remoteSnapshot } =
+            hostInstance.snapshotHandler.getGlobalRemoteInfo(remoteInfo);
+          logger.debug(
+            'find hostGlobalSnapshot: ',
+            JSON.stringify(hostGlobalSnapshot),
+          );
+          logger.debug('find remoteSnapshot: ', JSON.stringify(remoteSnapshot));
+
+          if (!hostGlobalSnapshot || !remoteSnapshot) {
+            if ('version' in remote) {
+              // @ts-ignore
+              delete remote.version;
+            }
+            // @ts-ignore
+            remote.entry = remoteEntry;
+            remote.entryGlobalName = remoteInfo.globalName;
+          }
+        }
+      } catch (e) {
+        ctx.status(500);
+        return ctx.text(
+          `failed to fetch ${remoteInfo.name} data, error:\n ${e}`,
+        );
+      }
+    }
+
+    const dataFetchItem = dataFetchMap[dataFetchKey];
+    logger.debug('fetch data from server, dataFetchItem: ', dataFetchItem);
+    if (dataFetchItem) {
+      const callFetchDataPromise = fetchData(dataFetchKey, {
+        ...params,
+        isDowngrade: !remoteInfo,
+        _id: dataFetchKey,
+      });
+      const wrappedPromise = wrapSetTimeout(
+        callFetchDataPromise,
+        20000,
+        dataFetchKey,
+      );
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        logger.log('fetch data from server, dataFetchItem res: ', res);
+        return ctx.json(res);
+      }
+    }
+
+    const remoteId = dataFetchKey.split(SEPARATOR)[0];
+    const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+    if (!hostInstance) {
+      throw new Error('host instance not found!');
+    }
+    const dataFetchFn = await loadDataFetchModule(hostInstance, remoteId);
+    const data = await dataFetchFn({
+      ...params,
+      isDowngrade: !remoteInfo,
+      _id: dataFetchKey,
+    });
+    logger.log('fetch data from server, loadDataFetchModule res: ', data);
+    return ctx.json(data);
+  } catch (e) {
+    logger.error('server plugin data fetch error: ', e);
+    ctx.status(500);
+    return ctx.text(`failed to fetch ${remoteInfo.name} data, error:\n ${e}`);
+  }
+};
+
+export default dataFetchServerMiddleware;
diff --git a/packages/bridge/bridge-react/src/lazy/data-fetch/index.ts b/packages/bridge/bridge-react/src/lazy/data-fetch/index.ts
new file mode 100644
index 00000000000..db35110e60f
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/data-fetch/index.ts
@@ -0,0 +1,16 @@
+export { callDataFetch } from './call-data-fetch';
+export { injectDataFetch } from './inject-data-fetch';
+export {
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+} from './cache';
+
+export type { CacheStatus, CacheStatsInfo } from './cache';
+
+export type { PrefetchOptions } from './prefetch';
+export { prefetch } from './prefetch';
diff --git a/packages/bridge/bridge-react/src/lazy/data-fetch/inject-data-fetch.ts b/packages/bridge/bridge-react/src/lazy/data-fetch/inject-data-fetch.ts
new file mode 100644
index 00000000000..bc654551df6
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/data-fetch/inject-data-fetch.ts
@@ -0,0 +1,109 @@
+import {
+  DATA_FETCH_FUNCTION,
+  DOWNGRADE_KEY,
+  FS_HREF,
+  MF_DATA_FETCH_STATUS,
+  MF_DATA_FETCH_TYPE,
+} from '../constant';
+import logger from '../logger';
+import {
+  dataFetchFunctionOptions,
+  MF_DATA_FETCH_MAP_VALUE_PROMISE_SET,
+} from '../types';
+import {
+  callAllDowngrade,
+  callDowngrade,
+  getDataFetchItem,
+  getDataFetchMap,
+  getDowngradeTag,
+  initDataFetchMap,
+} from '../utils';
+
+const dataFetchFunction = async function (options: dataFetchFunctionOptions) {
+  const [id, data, downgrade] = options;
+  logger.debug('==========call data fetch function!');
+  if (data) {
+    if (!id) {
+      throw new Error('id is required!');
+    }
+    if (!getDataFetchMap()) {
+      initDataFetchMap();
+    }
+    const dataFetchItem = getDataFetchItem(id);
+    if (dataFetchItem) {
+      dataFetchItem[1]?.[1]?.(data);
+      dataFetchItem[2] = MF_DATA_FETCH_STATUS.LOADED;
+      return;
+    }
+    if (!dataFetchItem) {
+      const dataFetchMap = getDataFetchMap();
+      let res: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[1];
+      let rej: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[2];
+      const p = new Promise((resolve, reject) => {
+        res = resolve;
+        rej = reject;
+      });
+
+      dataFetchMap[id] = [
+        [
+          async () => async () => {
+            return '';
+          },
+          MF_DATA_FETCH_TYPE.FETCH_SERVER,
+        ],
+        [p, res, rej],
+        MF_DATA_FETCH_STATUS.LOADED,
+      ];
+      res && res(data);
+      return;
+    }
+  }
+
+  if (downgrade) {
+    const mfDowngrade = getDowngradeTag();
+    if (!mfDowngrade) {
+      globalThis[DOWNGRADE_KEY] = id ? [id] : true;
+    } else if (Array.isArray(mfDowngrade) && id && !mfDowngrade.includes(id)) {
+      mfDowngrade.push(id);
+    }
+  }
+
+  const mfDowngrade = getDowngradeTag();
+
+  if (typeof mfDowngrade === 'boolean') {
+    return callAllDowngrade();
+  }
+  if (Array.isArray(mfDowngrade)) {
+    if (!id) {
+      globalThis[DOWNGRADE_KEY] = true;
+      return callAllDowngrade();
+    }
+
+    if (!mfDowngrade.includes(id)) {
+      mfDowngrade.push(id);
+    }
+
+    return callDowngrade(id);
+  }
+};
+
+export function injectDataFetch() {
+  globalThis[DATA_FETCH_FUNCTION] ||= [];
+  const dataFetch = globalThis[DATA_FETCH_FUNCTION];
+
+  //@ts-ignore
+  if (dataFetch.push === dataFetchFunction) {
+    return;
+  }
+
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  globalThis[FS_HREF] = window.location.href;
+
+  //@ts-ignore
+  dataFetch.push = dataFetchFunction;
+}
+
+export { dataFetchFunction };
diff --git a/packages/bridge/bridge-react/src/lazy/data-fetch/prefetch.ts b/packages/bridge/bridge-react/src/lazy/data-fetch/prefetch.ts
new file mode 100644
index 00000000000..e3dc97f7ca2
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/data-fetch/prefetch.ts
@@ -0,0 +1,106 @@
+import type { getInstance } from '@module-federation/runtime';
+import {
+  getDataFetchInfo,
+  getDataFetchMap,
+  getDataFetchMapKey,
+} from '../utils';
+import logger from '../logger';
+import helpers from '@module-federation/runtime/helpers';
+import { DataFetchParams } from '../types';
+
+export type PrefetchOptions = {
+  id: string;
+  instance: ReturnType<typeof getInstance>;
+  dataFetchParams?: DataFetchParams;
+  preloadComponentResource?: boolean;
+};
+
+export async function prefetch(options: PrefetchOptions) {
+  const { instance, id, dataFetchParams, preloadComponentResource } = options;
+  if (!id) {
+    logger.error('id is required for prefetch!');
+    return;
+  }
+  if (!instance) {
+    logger.error('instance is required for prefetch!');
+    return;
+  }
+  const matchedRemoteInfo = helpers.utils.matchRemoteWithNameAndExpose(
+    instance.options.remotes,
+    id,
+  );
+  if (!matchedRemoteInfo) {
+    logger.error(`Can not found '${id}' in instance.options.remotes!`);
+    return;
+  }
+  const { remote, expose } = matchedRemoteInfo;
+  const { remoteSnapshot, globalSnapshot } =
+    await instance.snapshotHandler.loadRemoteSnapshotInfo({
+      moduleInfo: remote,
+      id,
+      expose,
+    });
+
+  if (preloadComponentResource) {
+    const remoteInfo = helpers.utils.getRemoteInfo(remote);
+
+    instance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit({
+      origin: instance,
+      preloadOptions: {
+        remote,
+        preloadConfig: {
+          nameOrAlias: remote.name,
+          exposes: [expose],
+        },
+      },
+      remote,
+      remoteInfo,
+      globalSnapshot,
+      remoteSnapshot,
+    });
+  }
+
+  const dataFetchMap = getDataFetchMap();
+  if (!dataFetchMap) {
+    return;
+  }
+  const dataFetchInfo = getDataFetchInfo({
+    name: remote.name,
+    alias: remote.alias,
+    id,
+    remoteSnapshot,
+  });
+
+  const dataFetchMapKey = getDataFetchMapKey(dataFetchInfo, {
+    name: instance.name,
+    version: instance.options.version,
+  });
+
+  if (!dataFetchMapKey) {
+    return;
+  }
+
+  const dataFetchItem = dataFetchMap[dataFetchMapKey];
+  if (!dataFetchItem) {
+    return;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [getDataFetchGetter, _type, getDataFetchPromise] = dataFetchItem[0];
+
+  let _getDataFetchPromise = getDataFetchPromise;
+  if (!getDataFetchPromise) {
+    if (!getDataFetchGetter) {
+      return;
+    }
+    _getDataFetchPromise = getDataFetchGetter();
+  }
+
+  _getDataFetchPromise!.then((dataFetchFn) => {
+    return dataFetchFn({
+      ...dataFetchParams,
+      _id: dataFetchMapKey,
+      isDowngrade: false,
+    });
+  });
+}
diff --git a/packages/bridge/bridge-react/src/lazy/data-fetch/runtime-plugin.ts b/packages/bridge/bridge-react/src/lazy/data-fetch/runtime-plugin.ts
new file mode 100644
index 00000000000..f692c2cca52
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/data-fetch/runtime-plugin.ts
@@ -0,0 +1,115 @@
+import { injectDataFetch } from './inject-data-fetch';
+import {
+  getDataFetchInfo,
+  initDataFetchMap,
+  getDataFetchItem,
+  getDataFetchMap,
+  isCSROnly,
+  getDataFetchMapKey,
+  isDataLoaderExpose,
+  loadDataFetchModule,
+  isServerEnv,
+} from '../utils';
+import logger from '../logger';
+import {
+  MF_DATA_FETCH_TYPE,
+  MF_DATA_FETCH_STATUS,
+  DATA_FETCH_CLIENT_SUFFIX,
+} from '../constant';
+
+import type { MF_DATA_FETCH_MAP_VALUE } from '../types';
+import type { FederationRuntimePlugin } from '@module-federation/runtime';
+
+const autoFetchData: () => FederationRuntimePlugin = () => {
+  initDataFetchMap();
+  injectDataFetch();
+  return {
+    name: 'auto-fetch-data-plugin',
+    afterLoadSnapshot(args) {
+      const { id, moduleInfo, remoteSnapshot, host } = args;
+      if (typeof id === 'string' && isDataLoaderExpose(id)) {
+        return args;
+      }
+      if (!remoteSnapshot || !id || !('modules' in remoteSnapshot)) {
+        return args;
+      }
+
+      const { name, alias } = moduleInfo;
+      const dataFetchInfo = getDataFetchInfo({
+        name,
+        alias,
+        id,
+        remoteSnapshot,
+      });
+      if (!dataFetchInfo) {
+        return args;
+      }
+      const { dataFetchId, dataFetchName } = dataFetchInfo;
+
+      const dataFetchMapKey = getDataFetchMapKey(dataFetchInfo, {
+        name: host.name,
+        version: host.options.version,
+      });
+      logger.debug(
+        '======= auto fetch plugin dataFetchMapKey: ',
+        dataFetchMapKey,
+      );
+
+      if (!dataFetchMapKey) {
+        return args;
+      }
+
+      const dataFetchItem = getDataFetchItem(dataFetchMapKey);
+      if (dataFetchItem) {
+        return args;
+      }
+
+      const dataFetchMap = getDataFetchMap();
+      const hasSSRAsset = Boolean(remoteSnapshot.ssrRemoteEntry);
+      const hasDataFetchClient = Boolean(
+        remoteSnapshot.modules.find(
+          (module) =>
+            module.moduleName === `${dataFetchName}${DATA_FETCH_CLIENT_SUFFIX}`,
+        ),
+      );
+      const downgradeType = hasDataFetchClient
+        ? MF_DATA_FETCH_TYPE.FETCH_CLIENT
+        : hasSSRAsset
+          ? MF_DATA_FETCH_TYPE.FETCH_SERVER
+          : MF_DATA_FETCH_TYPE.FETCH_CLIENT;
+      let finalDataFetchId = dataFetchId;
+
+      if (!isServerEnv()) {
+        finalDataFetchId =
+          downgradeType === MF_DATA_FETCH_TYPE.FETCH_CLIENT
+            ? hasDataFetchClient
+              ? `${dataFetchId}${DATA_FETCH_CLIENT_SUFFIX}`
+              : dataFetchId
+            : dataFetchId;
+      }
+
+      const getDataFetchGetter = () =>
+        loadDataFetchModule(host, finalDataFetchId);
+
+      const dataFetchFnItem: MF_DATA_FETCH_MAP_VALUE[0] = [
+        getDataFetchGetter,
+        downgradeType,
+      ];
+
+      // server client must execute
+      if (typeof window === 'undefined' || isCSROnly()) {
+        dataFetchFnItem.push(getDataFetchGetter());
+      }
+
+      dataFetchMap[dataFetchMapKey] = [
+        dataFetchFnItem,
+        undefined,
+        MF_DATA_FETCH_STATUS.AWAIT,
+      ];
+
+      return args;
+    },
+  };
+};
+
+export default autoFetchData;
diff --git a/packages/bridge/bridge-react/src/lazy/index.ts b/packages/bridge/bridge-react/src/lazy/index.ts
new file mode 100644
index 00000000000..5c17973a9dd
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/index.ts
@@ -0,0 +1,35 @@
+import autoFetchDataPlugin from './data-fetch/runtime-plugin';
+
+export { ERROR_TYPE } from './constant';
+export type { DataFetchParams, NoSSRRemoteInfo } from './types';
+export type {
+  CreateLazyComponentOptions,
+  IProps as CollectSSRAssetsOptions,
+} from './createLazyComponent';
+
+export { createLazyComponent, collectSSRAssets } from './createLazyComponent';
+
+// export { wrapNoSSR } from './wrapNoSSR';
+
+export {
+  injectDataFetch,
+  callDataFetch,
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+  prefetch,
+} from './data-fetch';
+
+export { setSSREnv } from './utils';
+
+export { autoFetchDataPlugin };
+
+export type {
+  CacheStatus,
+  CacheStatsInfo,
+  PrefetchOptions,
+} from './data-fetch';
diff --git a/packages/bridge/bridge-react/src/lazy/logger.ts b/packages/bridge/bridge-react/src/lazy/logger.ts
new file mode 100644
index 00000000000..c1be3252163
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/logger.ts
@@ -0,0 +1,6 @@
+import { createLogger } from '@module-federation/sdk';
+import { PLUGIN_IDENTIFIER } from './constant';
+
+const logger = createLogger(PLUGIN_IDENTIFIER);
+
+export default logger;
diff --git a/packages/bridge/bridge-react/src/lazy/types.ts b/packages/bridge/bridge-react/src/lazy/types.ts
new file mode 100644
index 00000000000..36a4da055f9
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/types.ts
@@ -0,0 +1,75 @@
+import { MF_DATA_FETCH_TYPE, MF_DATA_FETCH_STATUS } from './constant';
+import type { LRUCache } from 'lru-cache';
+
+export type dataFetchFunctionOptions = [
+  id?: string,
+  data?: unknown,
+  downgrade?: boolean,
+];
+
+declare global {
+  var _mfSSRDowngrade: string[] | true | undefined;
+  var __MF_DATA_FETCH_MAP__: MF_DATA_FETCH_MAP | undefined;
+  var FEDERATION_SERVER_QUERY: Record<string, unknown> | undefined;
+  var FEDERATION_SSR: boolean | undefined;
+  var _mfFSHref: string | undefined;
+  var _mfDataFetch: Array<dataFetchFunctionOptions> | undefined;
+  var __MF_DATA_FETCH_CACHE__: MF_DATA_FETCH_CACHE | undefined;
+}
+
+export interface CacheItem<T> {
+  data: T;
+  timestamp: number;
+  isRevalidating?: boolean;
+}
+
+export type DataFetchParams = {
+  isDowngrade: boolean;
+  _id?: string;
+} & Record<string, unknown>;
+export type DataFetch<T> = (params: DataFetchParams) => Promise<T>;
+
+// loading, resolve, reject
+export type MF_DATA_FETCH_MAP_VALUE_PROMISE_SET = [
+  Promise<unknown>,
+  ((data: unknown) => void)?,
+  ((err: unknown) => void)?,
+];
+export type MF_DATA_FETCH_MAP_VALUE = [
+  [
+    // getDataFetchGetter
+    () => Promise<DataFetch<unknown>>,
+    // data fetch type
+    MF_DATA_FETCH_TYPE,
+    // getDataFetchPromise
+    Promise<DataFetch<unknown>>?,
+  ],
+  MF_DATA_FETCH_MAP_VALUE_PROMISE_SET?,
+  MF_DATA_FETCH_STATUS?,
+];
+export type MF_DATA_FETCH_MAP = Record<string, MF_DATA_FETCH_MAP_VALUE>;
+export type MF_SSR_DOWNGRADE = string[] | true | undefined;
+
+export type NoSSRRemoteInfo = {
+  name: string;
+  version: string;
+  ssrPublicPath: string;
+  ssrRemoteEntry: string;
+  globalName: string;
+};
+
+export interface CacheConfig {
+  maxSize?: number;
+  unstable_shouldDisable?: ({
+    request,
+  }: {
+    request: Request;
+  }) => boolean | Promise<boolean>;
+}
+
+// key is the id, default is the same with dataFetchMapId, but it can be custom by passing dataFetchParams.id
+export type MF_DATA_FETCH_CACHE = {
+  cacheStore?: LRUCache<string, Map<string, CacheItem<any>>>;
+  tagKeyMap?: Map<string, Set<string>>;
+  cacheConfig?: CacheConfig;
+};
diff --git a/packages/bridge/bridge-react/src/lazy/utils.ts b/packages/bridge/bridge-react/src/lazy/utils.ts
new file mode 100644
index 00000000000..4a03992519f
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/utils.ts
@@ -0,0 +1,372 @@
+import { isBrowserEnv, composeKeyWithSeparator } from '@module-federation/sdk';
+import logger from './logger';
+import {
+  DOWNGRADE_KEY,
+  MF_DATA_FETCH_STATUS,
+  WRAP_DATA_FETCH_ID_IDENTIFIER,
+  DATA_FETCH_QUERY,
+  MF_DATA_FETCH_TYPE,
+  DATA_FETCH_IDENTIFIER,
+  DATA_FETCH_CLIENT_SUFFIX,
+} from './constant';
+
+import type { GlobalModuleInfo } from '@module-federation/sdk';
+import type {
+  DataFetchParams,
+  MF_DATA_FETCH_MAP,
+  NoSSRRemoteInfo,
+  MF_SSR_DOWNGRADE,
+  MF_DATA_FETCH_MAP_VALUE_PROMISE_SET,
+  MF_DATA_FETCH_CACHE,
+} from './types';
+import type { FederationHost } from '@module-federation/runtime';
+import { clearStore } from './data-fetch/cache';
+
+export const getDataFetchInfo = ({
+  name,
+  alias,
+  id,
+  remoteSnapshot,
+}: {
+  id: string;
+  name: string;
+  remoteSnapshot: GlobalModuleInfo[string];
+  alias?: string;
+}) => {
+  if (!remoteSnapshot) {
+    return;
+  }
+  if (!('modules' in remoteSnapshot)) {
+    return;
+  }
+  const regex = new RegExp(`^${name}(/[^/].*|)$`);
+  const nameOrAlias = regex.test(id) ? name : alias || name;
+
+  const expose = id.replace(nameOrAlias, '');
+  let dataFetchName = '';
+  let dataFetchId = '';
+  let dataFetchKey = '';
+  if (expose.startsWith('/')) {
+    dataFetchName = `${expose.slice(1)}.${DATA_FETCH_IDENTIFIER}`;
+    dataFetchId = `${id}.${DATA_FETCH_IDENTIFIER}`;
+    dataFetchKey = `${name}${expose}.${DATA_FETCH_IDENTIFIER}`;
+  } else if (expose === '') {
+    dataFetchName = DATA_FETCH_IDENTIFIER;
+    dataFetchId = `${id}/${DATA_FETCH_IDENTIFIER}`;
+    dataFetchKey = `${name}/${DATA_FETCH_IDENTIFIER}`;
+  } else {
+    return;
+  }
+
+  if (!dataFetchName || !dataFetchId || !dataFetchKey) {
+    return;
+  }
+
+  if (
+    !remoteSnapshot.modules.find(
+      (module) => module.moduleName === dataFetchName,
+    )
+  ) {
+    return;
+  }
+
+  return {
+    dataFetchName,
+    dataFetchId,
+    dataFetchKey,
+  };
+};
+
+export function initDataFetchMap() {
+  globalThis.__MF_DATA_FETCH_MAP__ ||= {};
+}
+
+export function getDataFetchItem(id: string) {
+  return (globalThis.__MF_DATA_FETCH_MAP__ as MF_DATA_FETCH_MAP)?.[id];
+}
+
+export function getDataFetchMap() {
+  return globalThis.__MF_DATA_FETCH_MAP__ as MF_DATA_FETCH_MAP;
+}
+
+export function getDataFetchCache() {
+  return globalThis.__MF_DATA_FETCH_CACHE__ as MF_DATA_FETCH_CACHE;
+}
+
+export const flushDataFetch = () => {
+  globalThis.__MF_DATA_FETCH_MAP__ = {};
+  globalThis[DOWNGRADE_KEY] = undefined;
+  clearStore();
+};
+
+export function setDataFetchItemLoadedStatus(id: string) {
+  const dataFetchItem = getDataFetchItem(id);
+  if (!dataFetchItem) {
+    return;
+  }
+  dataFetchItem[2] = MF_DATA_FETCH_STATUS.LOADED;
+}
+
+export const wrapDataFetchId = (id?: string) => {
+  return `${WRAP_DATA_FETCH_ID_IDENTIFIER}${id}${WRAP_DATA_FETCH_ID_IDENTIFIER}`;
+};
+
+export const getDataFetchIdWithErrorMsgs = (errMsgs: string) => {
+  const firstIdentifierIndex = errMsgs.indexOf(WRAP_DATA_FETCH_ID_IDENTIFIER);
+  if (firstIdentifierIndex === -1) {
+    return undefined;
+  }
+
+  const secondIdentifierIndex = errMsgs.indexOf(
+    WRAP_DATA_FETCH_ID_IDENTIFIER,
+    firstIdentifierIndex + WRAP_DATA_FETCH_ID_IDENTIFIER.length,
+  );
+
+  if (secondIdentifierIndex === -1) {
+    return undefined;
+  }
+
+  return errMsgs.substring(
+    firstIdentifierIndex + WRAP_DATA_FETCH_ID_IDENTIFIER.length,
+    secondIdentifierIndex,
+  );
+};
+
+export async function fetchData(
+  id: string,
+  params: DataFetchParams,
+  remoteInfo?: NoSSRRemoteInfo,
+): Promise<unknown | undefined> {
+  const callFetchData = async () => {
+    const item = getDataFetchItem(id);
+    if (!item) {
+      return;
+    }
+    const [fetchDataFnArr, ..._rest] = item;
+
+    const fetchDataFn = await fetchDataFnArr[2];
+    if (!fetchDataFn) {
+      return;
+    }
+    return fetchDataFn({
+      ...params,
+      _id: id,
+    });
+  };
+  if (isBrowserEnv()) {
+    const dataFetchItem = getDataFetchItem(id);
+    if (!dataFetchItem) {
+      throw new Error(`dataFetchItem not found, id: ${id}`);
+    }
+    if (dataFetchItem[1]?.[0]) {
+      return dataFetchItem[1][0];
+    }
+
+    if (isCSROnly()) {
+      logger.debug('==========csr only!');
+      return callFetchData();
+    }
+
+    if (remoteInfo) {
+      return callDowngrade(id, params, remoteInfo);
+    }
+
+    const mfDowngrade = getDowngradeTag();
+    if (
+      mfDowngrade &&
+      (typeof mfDowngrade === 'boolean' || mfDowngrade.includes(id))
+    ) {
+      return callDowngrade(id, { ...params, isDowngrade: true });
+    }
+
+    let res;
+    let rej;
+    const p = new Promise((resolve, reject) => {
+      res = resolve;
+      rej = reject;
+    });
+    dataFetchItem[1] = [p, res, rej];
+    dataFetchItem[2] = MF_DATA_FETCH_STATUS.AWAIT;
+    return dataFetchItem[1][0];
+  }
+
+  return callFetchData();
+}
+
+export function getDataFetchMapKey(
+  dataFetchInfo?: ReturnType<typeof getDataFetchInfo>,
+  hostInfo?: { name: string; version?: string },
+) {
+  if (!dataFetchInfo || !hostInfo) {
+    return;
+  }
+
+  const { dataFetchKey } = dataFetchInfo;
+
+  return composeKeyWithSeparator(dataFetchKey, hostInfo.name, hostInfo.version);
+}
+
+export async function loadDataFetchModule(
+  instance: FederationHost,
+  id: string,
+) {
+  return instance.loadRemote(id).then((m) => {
+    if (
+      m &&
+      typeof m === 'object' &&
+      'fetchData' in m &&
+      typeof m.fetchData === 'function'
+    ) {
+      return m.fetchData as (params: DataFetchParams) => Promise<unknown>;
+    }
+    throw new Error(
+      `fetchData not found in remote ${id}, ${JSON.stringify(m)}`,
+    );
+  });
+}
+
+export function isDataLoaderExpose(exposeKey: string) {
+  return (
+    exposeKey.endsWith(DATA_FETCH_IDENTIFIER) ||
+    exposeKey.endsWith(DATA_FETCH_CLIENT_SUFFIX)
+  );
+}
+
+export function getDowngradeTag() {
+  return globalThis[DOWNGRADE_KEY] as MF_SSR_DOWNGRADE;
+}
+
+export function callAllDowngrade() {
+  const dataFetchMap = getDataFetchMap();
+  if (!dataFetchMap) {
+    return;
+  }
+  Object.keys(dataFetchMap).forEach((key) => {
+    callDowngrade(key);
+  });
+}
+
+export async function callDowngrade(
+  id: string,
+  params?: DataFetchParams,
+  remoteInfo?: NoSSRRemoteInfo,
+) {
+  const dataFetchMap = getDataFetchMap();
+  if (!dataFetchMap) {
+    return;
+  }
+  const mfDataFetch = dataFetchMap[id];
+  if (mfDataFetch?.[2] === MF_DATA_FETCH_STATUS.AWAIT) {
+    mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADING;
+    let promise: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[0];
+    let res: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[1];
+    let rej: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[2];
+    if (mfDataFetch[1]) {
+      promise = mfDataFetch[1][0];
+      res = mfDataFetch[1][1];
+      rej = mfDataFetch[1][2];
+    } else {
+      promise = new Promise((resolve, reject) => {
+        res = resolve;
+        rej = reject;
+      });
+      mfDataFetch[1] = [promise, res, rej];
+    }
+    const dataFetchType = mfDataFetch[0][1];
+    if (dataFetchType === MF_DATA_FETCH_TYPE.FETCH_CLIENT) {
+      try {
+        mfDataFetch[0][0]().then(async (getDataFetchFn) => {
+          return getDataFetchFn({
+            ...params,
+            isDowngrade: true,
+            _id: id,
+          }).then((data) => {
+            mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADED;
+            res && res(data);
+          });
+        });
+      } catch (e) {
+        mfDataFetch[2] = MF_DATA_FETCH_STATUS.ERROR;
+        rej && rej(e);
+      }
+    } else if (dataFetchType === MF_DATA_FETCH_TYPE.FETCH_SERVER) {
+      try {
+        const currentUrl = new URL(window.location.href);
+        currentUrl.searchParams.set(DATA_FETCH_QUERY, encodeURIComponent(id));
+        if (params) {
+          currentUrl.searchParams.set(
+            'params',
+            encodeURIComponent(JSON.stringify(params)),
+          );
+        }
+        if (remoteInfo) {
+          currentUrl.searchParams.set(
+            'remoteInfo',
+            encodeURIComponent(JSON.stringify(remoteInfo)),
+          );
+        }
+        const fetchServerQuery = globalThis.FEDERATION_SERVER_QUERY;
+        if (fetchServerQuery && typeof fetchServerQuery === 'object') {
+          Object.keys(fetchServerQuery).forEach((key) => {
+            currentUrl.searchParams.set(
+              key,
+              JSON.stringify(fetchServerQuery[key]),
+            );
+          });
+        }
+        const fetchUrl = currentUrl.toString();
+        const data = await fetch(fetchUrl).then((res) => res.json());
+        mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADED;
+        res && res(data);
+      } catch (e) {
+        mfDataFetch[2] = MF_DATA_FETCH_STATUS.ERROR;
+        rej && rej(e);
+      }
+    }
+
+    return promise;
+  }
+}
+
+export function isCSROnly() {
+  // @ts-ignore  modern.js will inject window._SSR_DATA if enable ssr
+  return window._SSR_DATA === undefined;
+}
+
+export function isServerEnv() {
+  return typeof window === 'undefined';
+}
+
+export function setSSREnv({
+  fetchServerQuery,
+}: {
+  fetchServerQuery?: Record<string, unknown>;
+}) {
+  globalThis.FEDERATION_SSR = true;
+  globalThis.FEDERATION_SERVER_QUERY = fetchServerQuery;
+}
+
+export function getLoadedRemoteInfos(
+  id: string,
+  instance: FederationHost | null,
+) {
+  if (!instance) {
+    return;
+  }
+  const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
+  if (!name) {
+    return;
+  }
+  const module = instance.moduleCache.get(name);
+  if (!module) {
+    return;
+  }
+  const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(
+    module.remoteInfo,
+  );
+  return {
+    ...module.remoteInfo,
+    snapshot: remoteSnapshot,
+    expose,
+  };
+}
diff --git a/packages/bridge/bridge-react/src/lazy/wrapNoSSR.tsx b/packages/bridge/bridge-react/src/lazy/wrapNoSSR.tsx
new file mode 100644
index 00000000000..de61d36476c
--- /dev/null
+++ b/packages/bridge/bridge-react/src/lazy/wrapNoSSR.tsx
@@ -0,0 +1,10 @@
+import { createLazyComponent } from './createLazyComponent';
+import type { CreateLazyComponentOptions } from './createLazyComponent';
+
+export function wrapNoSSR<T, E extends keyof T>(
+  createLazyComponentFn: typeof createLazyComponent<T, E>,
+) {
+  return (options: Omit<CreateLazyComponentOptions<T, E>, 'noSSR'>) => {
+    return createLazyComponentFn({ ...options, noSSR: true });
+  };
+}
diff --git a/packages/bridge/bridge-react/src/plugins/lazy-load-component-plugin.ts b/packages/bridge/bridge-react/src/plugins/lazy-load-component-plugin.ts
new file mode 100644
index 00000000000..52da37b291b
--- /dev/null
+++ b/packages/bridge/bridge-react/src/plugins/lazy-load-component-plugin.ts
@@ -0,0 +1,62 @@
+import type {
+  FederationHost,
+  FederationRuntimePlugin,
+} from '@module-federation/runtime';
+import {
+  createLazyComponent,
+  prefetch,
+  collectSSRAssets,
+  autoFetchDataPlugin,
+} from '../lazy';
+import type { CreateLazyComponentOptions, PrefetchOptions } from '../lazy';
+
+declare module '@module-federation/runtime-core' {
+  interface FederationHost {
+    createLazyComponent<T, E extends keyof T>(
+      options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>,
+    ): ReturnType<typeof createLazyComponent<T, E>>;
+    prefetch(
+      options: Omit<PrefetchOptions, 'instance'>,
+    ): ReturnType<typeof prefetch>;
+    // wrapNoSSR<T, E extends keyof T>(
+    //   createLazyComponentFn: typeof createLazyComponent<T, E>,
+    // ): (
+    //   options: Omit<CreateLazyComponentOptions<T, E>, 'instance' | 'noSSR'>,
+    // ) => ReturnType<typeof createLazyComponent<T, E>>;
+    collectSSRAssets(
+      options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>,
+    ): ReturnType<typeof collectSSRAssets>;
+  }
+}
+
+export function lazyLoadComponentPlugin(): FederationRuntimePlugin {
+  return {
+    name: 'lazy-load-component-plugin',
+    apply(instance: FederationHost) {
+      instance.registerPlugins([autoFetchDataPlugin()]);
+
+      instance.createLazyComponent = (options) => {
+        return createLazyComponent({
+          instance,
+          ...options,
+        });
+      };
+
+      instance.prefetch = (options) => {
+        return prefetch({
+          instance,
+          ...options,
+        });
+      };
+
+      instance.collectSSRAssets = (options) => {
+        return collectSSRAssets({
+          instance,
+          ...options,
+        });
+      };
+    },
+  };
+}
+
+export default lazyLoadComponentPlugin;
diff --git a/packages/bridge/bridge-react/src/remote/component.tsx b/packages/bridge/bridge-react/src/remote/component.tsx
index 9112d9bb650..7f617131f8a 100644
--- a/packages/bridge/bridge-react/src/remote/component.tsx
+++ b/packages/bridge/bridge-react/src/remote/component.tsx
@@ -48,7 +48,7 @@ const RemoteAppWrapper = forwardRef(function (
     return () => {
       if (providerInfoRef.current?.destroy) {
         LoggerInstance.debug(
-          `createRemoteComponent LazyComponent destroy >>>`,
+          `createRemoteAppComponent LazyComponent destroy >>>`,
           { moduleName, basename, dom: renderDom.current },
         );
 
@@ -171,7 +171,7 @@ export function withRouterData<
       }
     }
 
-    LoggerInstance.debug(`createRemoteComponent withRouterData >>>`, {
+    LoggerInstance.debug(`createRemoteAppComponent withRouterData >>>`, {
       ...props,
       basename,
       routerContextVal,
@@ -185,7 +185,7 @@ export function withRouterData<
       useEffect(() => {
         if (pathname !== '' && pathname !== location.pathname) {
           LoggerInstance.debug(
-            `createRemoteComponent dispatchPopstateEnv >>>`,
+            `createRemoteAppComponent dispatchPopstateEnv >>>`,
             {
               name: props.name,
               pathname: location.pathname,
diff --git a/packages/bridge/bridge-react/src/remote/create.tsx b/packages/bridge/bridge-react/src/remote/create.tsx
index 42a4c064f68..38bfcf490fc 100644
--- a/packages/bridge/bridge-react/src/remote/create.tsx
+++ b/packages/bridge/bridge-react/src/remote/create.tsx
@@ -16,7 +16,7 @@ function createLazyRemoteComponent<
 >(info: LazyRemoteComponentInfo<T, E>) {
   const exportName = info?.export || 'default';
   return React.lazy(async () => {
-    LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
+    LoggerInstance.debug(`createRemoteAppComponent LazyComponent create >>>`, {
       lazyComponent: info.loader,
       exportName,
     });
@@ -26,7 +26,7 @@ function createLazyRemoteComponent<
       // @ts-ignore
       const moduleName = m && m[Symbol.for('mf_module_id')];
       LoggerInstance.debug(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
         { name: moduleName, module: m, exportName },
       );
 
@@ -55,7 +55,7 @@ function createLazyRemoteComponent<
         };
       } else {
         LoggerInstance.debug(
-          `createRemoteComponent LazyComponent module not found >>>`,
+          `createRemoteAppComponent LazyComponent module not found >>>`,
           { name: moduleName, module: m, exportName },
         );
         throw Error(
@@ -70,7 +70,7 @@ function createLazyRemoteComponent<
   });
 }
 
-export function createRemoteComponent<
+export function createRemoteAppComponent<
   T = Record<string, unknown>,
   E extends keyof T = keyof T,
 >(info: LazyRemoteComponentInfo<T, E>) {
@@ -87,3 +87,16 @@ export function createRemoteComponent<
     );
   });
 }
+
+/**
+ * @deprecated createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export function createRemoteComponent<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+>(info: LazyRemoteComponentInfo<T, E>) {
+  LoggerInstance.warn(
+    `createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`,
+  );
+  return createRemoteAppComponent(info);
+}
diff --git a/packages/bridge/bridge-react/tsconfig.json b/packages/bridge/bridge-react/tsconfig.json
index 0d9967f6a9e..0846dd1f090 100644
--- a/packages/bridge/bridge-react/tsconfig.json
+++ b/packages/bridge/bridge-react/tsconfig.json
@@ -9,7 +9,7 @@
     "declarationDir": "./dist/types",
     "rootDir": "./src",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2015",
 
     /* Linting */
     "noUnusedLocals": true,
diff --git a/packages/bridge/bridge-react/vite.config.ts b/packages/bridge/bridge-react/vite.config.ts
index 4f69518cfc3..f7f4aecfb4f 100644
--- a/packages/bridge/bridge-react/vite.config.ts
+++ b/packages/bridge/bridge-react/vite.config.ts
@@ -26,6 +26,19 @@ export default defineConfig({
         'router-v6': path.resolve(__dirname, 'src/router/v6.tsx'),
         v18: path.resolve(__dirname, 'src/v18.ts'),
         v19: path.resolve(__dirname, 'src/v19.ts'),
+        'lazy-load-component-plugin': path.resolve(
+          __dirname,
+          'src/plugins/lazy-load-component-plugin.ts',
+        ),
+        'data-fetch-server-middleware': path.resolve(
+          __dirname,
+          'src/lazy/data-fetch/data-fetch-server-middleware.ts',
+        ),
+        'lazy-utils': path.resolve(__dirname, 'src/lazy/utils.ts'),
+        'data-fetch-utils': path.resolve(
+          __dirname,
+          'src/lazy/data-fetch/index.ts',
+        ),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,
diff --git a/packages/bridge/vue3-bridge/src/create.ts b/packages/bridge/vue3-bridge/src/create.ts
index 756d80ff4f6..af6e5018f46 100644
--- a/packages/bridge/vue3-bridge/src/create.ts
+++ b/packages/bridge/vue3-bridge/src/create.ts
@@ -5,7 +5,7 @@ import { LoggerInstance } from './utils.js';
 
 declare const __APP_VERSION__: string;
 
-export function createRemoteComponent(info: {
+export function createRemoteAppComponent(info: {
   loader: () => Promise<any>;
   export?: string;
   asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
@@ -29,17 +29,20 @@ export function createRemoteComponent(info: {
       }
 
       const exportName = info?.export || 'default';
-      LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
-        basename,
-        info,
-      });
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent create >>>`,
+        {
+          basename,
+          info,
+        },
+      );
 
       const module: any = await info.loader();
       const moduleName = module && module[Symbol.for('mf_module_id')];
       const exportFn = module[exportName];
 
       LoggerInstance.debug(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
         { moduleName, module, exportName, basename, route },
       );
 
@@ -59,3 +62,18 @@ export function createRemoteComponent(info: {
     },
   });
 }
+
+/**
+ * @deprecated createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export function createRemoteComponent(info: {
+  loader: () => Promise<any>;
+  export?: string;
+  asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
+  rootAttrs?: Record<string, unknown>;
+}) {
+  LoggerInstance.warn(
+    'createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!',
+  );
+  return createRemoteAppComponent(info);
+}
diff --git a/packages/bridge/vue3-bridge/src/index.ts b/packages/bridge/vue3-bridge/src/index.ts
index 7212a3c8f5c..4e2180a4708 100644
--- a/packages/bridge/vue3-bridge/src/index.ts
+++ b/packages/bridge/vue3-bridge/src/index.ts
@@ -1,3 +1,3 @@
 export { createBridgeComponent } from './provider';
-export { createRemoteComponent } from './create';
+export { createRemoteComponent, createRemoteAppComponent } from './create';
 export type { RenderFnParams } from '@module-federation/bridge-shared';
diff --git a/packages/bridge/vue3-bridge/src/remoteApp.tsx b/packages/bridge/vue3-bridge/src/remoteApp.tsx
index 417f12758e7..68b4a959222 100644
--- a/packages/bridge/vue3-bridge/src/remoteApp.tsx
+++ b/packages/bridge/vue3-bridge/src/remoteApp.tsx
@@ -43,7 +43,7 @@ export default defineComponent({
         hashRoute: props.hashRoute,
       };
       LoggerInstance.debug(
-        `createRemoteComponent LazyComponent render >>>`,
+        `createRemoteAppComponent LazyComponent render >>>`,
         renderProps,
       );
 
@@ -67,7 +67,7 @@ export default defineComponent({
         // dispatchPopstateEnv
         if (pathname.value !== '' && pathname.value !== newPath) {
           LoggerInstance.debug(
-            `createRemoteComponent dispatchPopstateEnv >>>`,
+            `createRemoteAppComponent dispatchPopstateEnv >>>`,
             {
               ...props,
               pathname: route.path,
@@ -84,9 +84,12 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      LoggerInstance.debug(`createRemoteComponent LazyComponent destroy >>>`, {
-        ...props,
-      });
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent destroy >>>`,
+        {
+          ...props,
+        },
+      );
       watchStopHandle();
 
       hostInstance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
diff --git a/packages/modernjs/package.json b/packages/modernjs/package.json
index 3860530afa3..0abb2fbd3b4 100644
--- a/packages/modernjs/package.json
+++ b/packages/modernjs/package.json
@@ -27,6 +27,14 @@
       "types": "./dist/types/runtime/index.d.ts",
       "default": "./dist/esm/runtime/index.js"
     },
+    "./runtime-plugin": {
+      "types": "./dist/types/runtime/plugin.d.ts",
+      "default": "./dist/esm/runtime/plugin.js"
+    },
+    "./react": {
+      "types": "./dist/types/react/index.d.ts",
+      "default": "./dist/esm/react/index.js"
+    },
     "./ssr-dev-plugin": {
       "types": "./dist/types/ssr-runtime/devPlugin.d.ts",
       "default": "./dist/esm/ssr-runtime/devPlugin.js"
@@ -55,11 +63,6 @@
       "import": "./dist/esm/cli/mfRuntimePlugins/resolve-entry-ipv4.js",
       "require": "./dist/esm/cli/mfRuntimePlugins/resolve-entry-ipv4.js"
     },
-    "./auto-fetch-data": {
-      "types": "./dist/types/cli/mfRuntimePlugins/auto-fetch-data.d.ts",
-      "import": "./dist/esm/cli/mfRuntimePlugins/auto-fetch-data.js",
-      "require": "./dist/esm/cli/mfRuntimePlugins/auto-fetch-data.js"
-    },
     "./inject-node-fetch": {
       "types": "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts",
       "import": "./dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js",
@@ -82,6 +85,12 @@
       "runtime": [
         "./dist/types/runtime/index.d.ts"
       ],
+      "runtime-plugin": [
+        "./dist/types/runtime/plugin.d.ts"
+      ],
+      "react": [
+        "./dist/types/react/index.d.ts"
+      ],
       "config-plugin": [
         "./dist/types/cli/configPlugin.d.ts"
       ],
@@ -94,9 +103,6 @@
       "resolve-entry-ipv4": [
         "./dist/types/cli/mfRuntimePlugins/resolve-entry-ipv4.d.ts"
       ],
-      "auto-fetch-data": [
-        "./dist/types/cli/mfRuntimePlugins/auto-fetch-data.d.ts"
-      ],
       "inject-node-fetch": [
         "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts"
       ],
@@ -119,6 +125,7 @@
     "@modern-js/utils": "2.67.5",
     "@modern-js/node-bundle-require": "2.67.6",
     "@module-federation/rsbuild-plugin": "workspace:*",
+    "@module-federation/bridge-react": "workspace:*",
     "fs-extra": "11.3.0",
     "lru-cache": "10.4.3",
     "@module-federation/enhanced": "workspace:*",
diff --git a/packages/modernjs/src/cli/configPlugin.spec.ts b/packages/modernjs/src/cli/configPlugin.spec.ts
index 732b608ea07..99a26714f07 100644
--- a/packages/modernjs/src/cli/configPlugin.spec.ts
+++ b/packages/modernjs/src/cli/configPlugin.spec.ts
@@ -34,7 +34,6 @@ describe('patchMFConfig', async () => {
       remoteType: 'script',
       runtimePlugins: [
         require.resolve('@module-federation/modern-js/shared-strategy'),
-        require.resolve('@module-federation/modern-js/auto-fetch-data'),
         require.resolve('@module-federation/node/runtimePlugin'),
         require.resolve('@module-federation/modern-js/inject-node-fetch'),
       ],
@@ -65,7 +64,9 @@ describe('patchMFConfig', async () => {
       remoteType: 'script',
       runtimePlugins: [
         require.resolve('@module-federation/modern-js/shared-strategy'),
-        require.resolve('@module-federation/modern-js/auto-fetch-data'),
+        require.resolve(
+          '@module-federation/bridge-react/lazy-load-component-plugin',
+        ),
       ],
       shared: {
         react: {
diff --git a/packages/modernjs/src/cli/configPlugin.ts b/packages/modernjs/src/cli/configPlugin.ts
index bd628a26e15..39aad0b9b08 100644
--- a/packages/modernjs/src/cli/configPlugin.ts
+++ b/packages/modernjs/src/cli/configPlugin.ts
@@ -169,11 +169,6 @@ export const patchMFConfig = (
     runtimePlugins,
   );
 
-  injectRuntimePlugins(
-    require.resolve('@module-federation/modern-js/auto-fetch-data'),
-    runtimePlugins,
-  );
-
   if (enableSSR && isDev()) {
     injectRuntimePlugins(
       require.resolve('@module-federation/modern-js/resolve-entry-ipv4'),
@@ -392,6 +387,15 @@ export const moduleFederationConfigPlugin = (
       userConfig.userConfig?.ssr ?? Boolean(modernjsConfig?.server?.ssr),
     );
 
+    // api._internalRuntimePlugins(({ entrypoint, plugins }) => {
+    //   plugins.push({
+    //     name: 'mf',
+    //     path: '@module-federation/modern-js/runtime-plugin',
+    //     config: {},
+    //   });
+    //   return { entrypoint, plugins };
+    // });
+
     api.modifyBundlerChain((chain) => {
       const target = chain.get('target');
       if (skipByTarget(target)) {
diff --git a/packages/modernjs/src/cli/mfRuntimePlugins/auto-fetch-data.ts b/packages/modernjs/src/cli/mfRuntimePlugins/auto-fetch-data.ts
deleted file mode 100644
index 259ee4c9142..00000000000
--- a/packages/modernjs/src/cli/mfRuntimePlugins/auto-fetch-data.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import {
-  getDataFetchInfo,
-  initDataFetchMap,
-  getDataFetchItem,
-  getDataFetchMap,
-  isCSROnly,
-} from '../../utils';
-import logger from '../../logger';
-import {
-  getDataFetchMapKey,
-  isDataLoaderExpose,
-  loadDataFetchModule,
-} from '../../utils/dataFetch';
-import { MF_DATA_FETCH_TYPE, MF_DATA_FETCH_STATUS } from '../../constant';
-import { DATA_FETCH_CLIENT_SUFFIX } from '@module-federation/rsbuild-plugin/constant';
-
-import type { MF_DATA_FETCH_MAP_VALUE } from '../../interfaces/global';
-import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
-
-const autoFetchData: () => FederationRuntimePlugin = () => ({
-  name: 'auto-fetch-data-plugin',
-  beforeInit(args) {
-    initDataFetchMap();
-    return args;
-  },
-  afterLoadSnapshot(args) {
-    const { id, moduleInfo, remoteSnapshot, host } = args;
-    if (typeof id === 'string' && isDataLoaderExpose(id)) {
-      return args;
-    }
-    if (!remoteSnapshot || !id || !('modules' in remoteSnapshot)) {
-      return args;
-    }
-
-    const { name, alias } = moduleInfo;
-    const dataFetchInfo = getDataFetchInfo({
-      name,
-      alias,
-      id,
-      remoteSnapshot,
-    });
-    if (!dataFetchInfo) {
-      return args;
-    }
-    const { dataFetchId, dataFetchName } = dataFetchInfo;
-
-    const dataFetchMapKey = getDataFetchMapKey(dataFetchInfo, {
-      name: host.name,
-      version: host.options.version,
-    });
-    logger.debug(
-      '======= auto fetch plugin dataFetchMapKey: ',
-      dataFetchMapKey,
-    );
-
-    if (!dataFetchMapKey) {
-      return args;
-    }
-
-    const dataFetchItem = getDataFetchItem(dataFetchMapKey);
-    if (dataFetchItem) {
-      return args;
-    }
-
-    const dataFetchMap = getDataFetchMap();
-    const hasSSRAsset = Boolean(remoteSnapshot.ssrRemoteEntry);
-    const hasDataFetchClient = Boolean(
-      remoteSnapshot.modules.find(
-        (module) =>
-          module.moduleName === `${dataFetchName}${DATA_FETCH_CLIENT_SUFFIX}`,
-      ),
-    );
-    const downgradeType = hasDataFetchClient
-      ? MF_DATA_FETCH_TYPE.FETCH_CLIENT
-      : hasSSRAsset
-        ? MF_DATA_FETCH_TYPE.FETCH_SERVER
-        : MF_DATA_FETCH_TYPE.FETCH_CLIENT;
-    let finalDataFetchId = dataFetchId;
-
-    if (typeof window !== 'undefined') {
-      finalDataFetchId =
-        downgradeType === MF_DATA_FETCH_TYPE.FETCH_CLIENT
-          ? hasDataFetchClient
-            ? `${dataFetchId}${DATA_FETCH_CLIENT_SUFFIX}`
-            : dataFetchId
-          : dataFetchId;
-    }
-
-    const getDataFetchGetter = () =>
-      loadDataFetchModule(host, finalDataFetchId);
-
-    const dataFetchFnItem: MF_DATA_FETCH_MAP_VALUE[0] = [
-      getDataFetchGetter,
-      downgradeType,
-    ];
-
-    // server client must execute
-    if (typeof window === 'undefined' || isCSROnly()) {
-      dataFetchFnItem.push(getDataFetchGetter());
-    }
-
-    dataFetchMap[dataFetchMapKey] = [
-      dataFetchFnItem,
-      undefined,
-      MF_DATA_FETCH_STATUS.AWAIT,
-    ];
-
-    return args;
-  },
-});
-
-export default autoFetchData;
diff --git a/packages/modernjs/src/cli/server/data-fetch-server-plugin.ts b/packages/modernjs/src/cli/server/data-fetch-server-plugin.ts
index 138321e6168..46952e729ad 100644
--- a/packages/modernjs/src/cli/server/data-fetch-server-plugin.ts
+++ b/packages/modernjs/src/cli/server/data-fetch-server-plugin.ts
@@ -1,194 +1,6 @@
-import { DATA_FETCH_QUERY, MF_DATA_FETCH_STATUS } from '../../constant';
-import logger from '../../logger';
-import { getDataFetchMap } from '../../utils';
-import {
-  fetchData,
-  initDataFetchMap,
-  loadDataFetchModule,
-} from '../../utils/dataFetch';
-import { SEPARATOR, MANIFEST_EXT } from '@module-federation/sdk';
-import type {
-  MiddlewareHandler,
-  ServerPlugin,
-} from '@modern-js/server-runtime';
-import type { NoSSRRemoteInfo } from '../../interfaces/global';
+import dataFetchMiddleWare from '@module-federation/bridge-react/data-fetch-server-middleware';
 
-function wrapSetTimeout(
-  targetPromise: Promise<unknown>,
-  delay = 20000,
-  id: string,
-) {
-  if (targetPromise && typeof targetPromise.then === 'function') {
-    return new Promise((resolve, reject) => {
-      const timeoutId = setTimeout(() => {
-        logger.warn(`Data fetch for ID ${id} timed out after 20 seconds.`);
-        reject(new Error(`Data fetch for ID ${id} timed out after 20 seconds`));
-      }, delay);
-
-      targetPromise
-        .then((value: any) => {
-          clearTimeout(timeoutId);
-          resolve(value);
-        })
-        .catch((err: any) => {
-          clearTimeout(timeoutId);
-          reject(err);
-        });
-    });
-  }
-}
-
-function addProtocol(url: string) {
-  if (url.startsWith('//')) {
-    return 'https:' + url;
-  }
-  return url;
-}
-
-const getDecodeQuery = (url: URL, name: string) => {
-  const res = url.searchParams.get(name);
-  if (!res) {
-    return null;
-  }
-  return decodeURIComponent(res);
-};
-
-const middleware: MiddlewareHandler = async (ctx, next) => {
-  let url: URL;
-  let dataFetchId: string | null;
-  let params: Record<string, unknown>;
-  let remoteInfo: NoSSRRemoteInfo;
-  try {
-    url = new URL(ctx.req.url);
-    dataFetchId = getDecodeQuery(url, DATA_FETCH_QUERY);
-    params = JSON.parse(getDecodeQuery(url, 'params') || '{}');
-    const remoteInfoQuery = getDecodeQuery(url, 'remoteInfo');
-    remoteInfo = remoteInfoQuery ? JSON.parse(remoteInfoQuery) : null;
-  } catch (e) {
-    logger.error('fetch data from server, error: ', e);
-    return next();
-  }
-
-  if (!dataFetchId) {
-    return next();
-  }
-  logger.log('fetch data from server, dataFetchId: ', dataFetchId);
-  logger.debug(
-    'fetch data from server, moduleInfo: ',
-    globalThis.__FEDERATION__?.moduleInfo,
-  );
-  try {
-    const dataFetchMap = getDataFetchMap();
-    if (!dataFetchMap) {
-      initDataFetchMap();
-    }
-    const fetchDataPromise = dataFetchMap[dataFetchId]?.[1];
-    logger.debug(
-      'fetch data from server, fetchDataPromise: ',
-      fetchDataPromise,
-    );
-    if (
-      fetchDataPromise &&
-      dataFetchMap[dataFetchId]?.[2] !== MF_DATA_FETCH_STATUS.ERROR
-    ) {
-      const targetPromise = fetchDataPromise[0];
-      // Ensure targetPromise is thenable
-      const wrappedPromise = wrapSetTimeout(targetPromise, 20000, dataFetchId);
-      if (wrappedPromise) {
-        const res = await wrappedPromise;
-        logger.log('fetch data from server, fetchDataPromise res: ', res);
-        return ctx.json(res);
-      }
-      logger.error(
-        `Expected a Promise from fetchDataPromise[0] for dataFetchId ${dataFetchId}, but received:`,
-        targetPromise,
-        'Will try call new dataFetch again...',
-      );
-    }
-
-    if (remoteInfo) {
-      try {
-        const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
-        const remoteEntry = `${addProtocol(remoteInfo.ssrPublicPath) + remoteInfo.ssrRemoteEntry}`;
-        if (!hostInstance) {
-          throw new Error('host instance not found!');
-        }
-        const remote = hostInstance.options.remotes.find(
-          (remote) => remote.name === remoteInfo.name,
-        );
-        logger.debug('find remote: ', JSON.stringify(remote));
-        if (!remote) {
-          hostInstance.registerRemotes([
-            {
-              name: remoteInfo.name,
-              entry: remoteEntry,
-              entryGlobalName: remoteInfo.globalName,
-            },
-          ]);
-        } else if (
-          !('entry' in remote) ||
-          !remote.entry.includes(MANIFEST_EXT)
-        ) {
-          const { hostGlobalSnapshot, remoteSnapshot } =
-            hostInstance.snapshotHandler.getGlobalRemoteInfo(remoteInfo);
-          logger.debug(
-            'find hostGlobalSnapshot: ',
-            JSON.stringify(hostGlobalSnapshot),
-          );
-          logger.debug('find remoteSnapshot: ', JSON.stringify(remoteSnapshot));
-
-          if (!hostGlobalSnapshot || !remoteSnapshot) {
-            if ('version' in remote) {
-              // @ts-ignore
-              delete remote.version;
-            }
-            // @ts-ignore
-            remote.entry = remoteEntry;
-            remote.entryGlobalName = remoteInfo.globalName;
-          }
-        }
-      } catch (e) {
-        ctx.status(500);
-        return ctx.text(
-          `failed to fetch ${remoteInfo.name} data, error:\n ${e}`,
-        );
-      }
-    }
-
-    const dataFetchItem = dataFetchMap[dataFetchId];
-    logger.debug('fetch data from server, dataFetchItem: ', dataFetchItem);
-    if (dataFetchItem) {
-      const callFetchDataPromise = fetchData(dataFetchId, {
-        ...params,
-        isDowngrade: !remoteInfo,
-      });
-      const wrappedPromise = wrapSetTimeout(
-        callFetchDataPromise,
-        20000,
-        dataFetchId,
-      );
-      if (wrappedPromise) {
-        const res = await wrappedPromise;
-        logger.log('fetch data from server, dataFetchItem res: ', res);
-        return ctx.json(res);
-      }
-    }
-
-    const remoteId = dataFetchId.split(SEPARATOR)[0];
-    const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
-    if (!hostInstance) {
-      throw new Error('host instance not found!');
-    }
-    const dataFetchFn = await loadDataFetchModule(hostInstance, remoteId);
-    const data = await dataFetchFn({ ...params, isDowngrade: !remoteInfo });
-    logger.log('fetch data from server, loadDataFetchModule res: ', data);
-    return ctx.json(data);
-  } catch (e) {
-    logger.error('server plugin data fetch error: ', e);
-    ctx.status(500);
-    return ctx.text(`failed to fetch ${remoteInfo.name} data, error:\n ${e}`);
-  }
-};
+import type { ServerPlugin } from '@modern-js/server-runtime';
 
 const dataFetchServePlugin = (): ServerPlugin => ({
   name: 'mf-data-fetch-server-plugin',
@@ -198,7 +10,7 @@ const dataFetchServePlugin = (): ServerPlugin => ({
       middlewares.push({
         name: 'module-federation-serve-manifest',
         // @ts-ignore type error
-        handler: middleware,
+        handler: dataFetchMiddleWare,
       });
     });
   },
diff --git a/packages/modernjs/src/constant.ts b/packages/modernjs/src/constant.ts
index 149c3b4c80a..8b547453196 100644
--- a/packages/modernjs/src/constant.ts
+++ b/packages/modernjs/src/constant.ts
@@ -1,28 +1,2 @@
 export const LOCALHOST = 'localhost';
 export const PLUGIN_IDENTIFIER = '[ Modern.js Module Federation ]';
-export const DATA_FETCH_QUERY = 'x-mf-data-fetch';
-export const DATA_FETCH_ERROR_PREFIX =
-  'caught the following error during dataFetch: ';
-export const LOAD_REMOTE_ERROR_PREFIX =
-  'caught the following error during loadRemote: ';
-export const DOWNGRADE_KEY = '_mfSSRDowngrade';
-export const DATA_FETCH_MAP_KEY = '__MF_DATA_FETCH_MAP__';
-export const DATA_FETCH_FUNCTION = '_mfDataFetch';
-export const FS_HREF = '_mfFSHref';
-export const ERROR_TYPE = {
-  DATA_FETCH: 1,
-  LOAD_REMOTE: 2,
-  UNKNOWN: 3,
-};
-export const WRAP_DATA_FETCH_ID_IDENTIFIER = 'wrap_dfip_identifier';
-export const enum MF_DATA_FETCH_TYPE {
-  FETCH_SERVER = 1,
-  FETCH_CLIENT = 2,
-}
-
-export const enum MF_DATA_FETCH_STATUS {
-  LOADED = 1,
-  LOADING = 2,
-  AWAIT = 0,
-  ERROR = 3,
-}
diff --git a/packages/modernjs/src/interfaces/global.ts b/packages/modernjs/src/interfaces/global.ts
deleted file mode 100644
index 6459ce70df5..00000000000
--- a/packages/modernjs/src/interfaces/global.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { MF_DATA_FETCH_TYPE, MF_DATA_FETCH_STATUS } from '../constant';
-
-export type DataFetchParams = {
-  isDowngrade: boolean;
-} & Record<string, unknown>;
-export type DataFetch<T> = (params: DataFetchParams) => Promise<T>;
-export type MF_DATA_FETCH_MAP_VALUE = [
-  [
-    // getDataFetchGetter
-    () => Promise<DataFetch<unknown>>,
-    MF_DATA_FETCH_TYPE,
-    // getDataFetchPromise
-    Promise<DataFetch<unknown>>?,
-  ],
-  // loading, resolve, reject
-  [Promise<unknown>, ((data: unknown) => void)?, ((err: unknown) => void)?]?,
-  MF_DATA_FETCH_STATUS?,
-];
-export type MF_DATA_FETCH_MAP = Record<string, MF_DATA_FETCH_MAP_VALUE>;
-export type MF_SSR_DOWNGRADE = string[] | true | undefined;
-
-export type NoSSRRemoteInfo = {
-  name: string;
-  version: string;
-  ssrPublicPath: string;
-  ssrRemoteEntry: string;
-  globalName: string;
-};
diff --git a/packages/modernjs/src/react/index.ts b/packages/modernjs/src/react/index.ts
new file mode 100644
index 00000000000..1e23bfa2a4e
--- /dev/null
+++ b/packages/modernjs/src/react/index.ts
@@ -0,0 +1,17 @@
+export {
+  ERROR_TYPE,
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+  lazyLoadComponentPlugin,
+} from '@module-federation/bridge-react';
+
+export type {
+  DataFetchParams,
+  CacheStatus,
+  CacheStatsInfo,
+} from '@module-federation/bridge-react';
diff --git a/packages/modernjs/src/runtime/index.ts b/packages/modernjs/src/runtime/index.ts
index 6838cdbfb7b..532254ed0fc 100644
--- a/packages/modernjs/src/runtime/index.ts
+++ b/packages/modernjs/src/runtime/index.ts
@@ -1,21 +1 @@
 export * from '@module-federation/enhanced/runtime';
-
-export type { DataFetchParams } from '../interfaces/global';
-export { ERROR_TYPE } from '../constant';
-// avoid import react directly https://github.com/web-infra-dev/modern.js/issues/7096
-export const kit = {
-  get createRemoteSSRComponent(): typeof import('./createRemoteComponent').createRemoteSSRComponent {
-    return require('./createRemoteComponent').createRemoteSSRComponent;
-  },
-  get createRemoteComponent(): typeof import('./createRemoteComponent').createRemoteComponent {
-    return require('./createRemoteComponent').createRemoteComponent;
-  },
-  get collectSSRAssets(): typeof import('./createRemoteComponent').collectSSRAssets {
-    return require('./createRemoteComponent').collectSSRAssets;
-  },
-  get wrapNoSSR(): typeof import('./wrapNoSSR').wrapNoSSR {
-    return require('./wrapNoSSR').wrapNoSSR;
-  },
-};
-
-export { setSSREnv } from '../ssr-runtime/injectDataFetchFunctionPlugin';
diff --git a/packages/modernjs/src/runtime/plugin.tsx b/packages/modernjs/src/runtime/plugin.tsx
new file mode 100644
index 00000000000..cca7d87d68c
--- /dev/null
+++ b/packages/modernjs/src/runtime/plugin.tsx
@@ -0,0 +1,15 @@
+import type { RuntimePluginFuture } from '@modern-js/runtime';
+import { getInstance } from '@module-federation/enhanced/runtime';
+import { lazyLoadComponentPlugin } from '@module-federation/bridge-react';
+
+export const mfPlugin = (): RuntimePluginFuture => {
+  return {
+    name: '@modern-js/plugin-mf',
+    setup: (api) => {
+      api.wrapRoot((App) => {
+        getInstance()?.registerPlugins([lazyLoadComponentPlugin()]);
+        return App;
+      });
+    },
+  };
+};
diff --git a/packages/modernjs/src/runtime/wrapNoSSR.tsx b/packages/modernjs/src/runtime/wrapNoSSR.tsx
deleted file mode 100644
index 4f1fc00b1be..00000000000
--- a/packages/modernjs/src/runtime/wrapNoSSR.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createRemoteComponent } from './createRemoteComponent';
-import type { CreateRemoteComponentOptions } from './createRemoteComponent';
-
-export function wrapNoSSR<T, E extends keyof T>(
-  createComponentFn: typeof createRemoteComponent<T, E>,
-) {
-  return (options: Omit<CreateRemoteComponentOptions<T, E>, 'noSSR'>) => {
-    return createComponentFn({ ...options, noSSR: true });
-  };
-}
diff --git a/packages/modernjs/src/ssr-runtime/devPlugin.tsx b/packages/modernjs/src/ssr-runtime/devPlugin.tsx
index d4f2f525fcf..a2c8ec8b086 100644
--- a/packages/modernjs/src/ssr-runtime/devPlugin.tsx
+++ b/packages/modernjs/src/ssr-runtime/devPlugin.tsx
@@ -1,6 +1,6 @@
 import type { RuntimePluginFuture } from '@modern-js/runtime';
 import { SSRLiveReload } from './SSRLiveReload';
-import { flushDataFetch } from '../utils';
+import { flushDataFetch } from '@module-federation/bridge-react/lazy-utils';
 
 export const mfSSRDevPlugin = (): RuntimePluginFuture => ({
   name: '@module-federation/modern-js',
diff --git a/packages/modernjs/src/ssr-runtime/downgrade.ts b/packages/modernjs/src/ssr-runtime/downgrade.ts
deleted file mode 100644
index dad14245fc5..00000000000
--- a/packages/modernjs/src/ssr-runtime/downgrade.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { DATA_FETCH_QUERY, DOWNGRADE_KEY } from '../constant';
-import { MF_DATA_FETCH_STATUS, MF_DATA_FETCH_TYPE } from '../constant';
-import { getDataFetchMap, initDataFetchMap } from '../utils';
-
-import type {
-  DataFetchParams,
-  MF_SSR_DOWNGRADE,
-  NoSSRRemoteInfo,
-} from '../interfaces/global';
-
-export function getDowngradeTag() {
-  return globalThis[DOWNGRADE_KEY] as MF_SSR_DOWNGRADE;
-}
-
-export function callAllDowngrade() {
-  const dataFetchMap = getDataFetchMap();
-  if (!dataFetchMap) {
-    return;
-  }
-  Object.keys(dataFetchMap).forEach((key) => {
-    callDowngrade(key);
-  });
-}
-
-export async function callDowngrade(
-  id: string,
-  params?: DataFetchParams,
-  remoteInfo?: NoSSRRemoteInfo,
-) {
-  const dataFetchMap = getDataFetchMap();
-  if (!dataFetchMap) {
-    return;
-  }
-  const mfDataFetch = dataFetchMap[id];
-  if (mfDataFetch?.[2] === MF_DATA_FETCH_STATUS.AWAIT) {
-    mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADING;
-    let promise, res, rej;
-    if (mfDataFetch[1]) {
-      promise = mfDataFetch[1][0];
-      res = mfDataFetch[1][1];
-      rej = mfDataFetch[1][2];
-    } else {
-      promise = new Promise((resolve, reject) => {
-        res = resolve;
-        rej = reject;
-      });
-      mfDataFetch[1] = [promise, res, rej];
-    }
-    const dataFetchType = mfDataFetch[0][1];
-    if (dataFetchType === MF_DATA_FETCH_TYPE.FETCH_CLIENT) {
-      try {
-        mfDataFetch[0][0]().then((getDataFetchFn) => {
-          return getDataFetchFn({
-            ...params,
-            isDowngrade: true,
-          }).then((data) => {
-            mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADED;
-            res(data);
-          });
-        });
-      } catch (e) {
-        mfDataFetch[2] = MF_DATA_FETCH_STATUS.ERROR;
-        rej(e);
-      }
-    } else if (dataFetchType === MF_DATA_FETCH_TYPE.FETCH_SERVER) {
-      try {
-        const currentUrl = new URL(window.location.href);
-        currentUrl.searchParams.set(DATA_FETCH_QUERY, encodeURIComponent(id));
-        if (params) {
-          currentUrl.searchParams.set(
-            'params',
-            encodeURIComponent(JSON.stringify(params)),
-          );
-        }
-        if (remoteInfo) {
-          currentUrl.searchParams.set(
-            'remoteInfo',
-            encodeURIComponent(JSON.stringify(remoteInfo)),
-          );
-        }
-        const fetchServerQuery = globalThis.FEDERATION_SERVER_QUERY;
-        if (fetchServerQuery && typeof fetchServerQuery === 'object') {
-          Object.keys(fetchServerQuery).forEach((key) => {
-            currentUrl.searchParams.set(
-              key,
-              JSON.stringify(fetchServerQuery[key]),
-            );
-          });
-        }
-        const fetchUrl = currentUrl.toString();
-        const data = await fetch(fetchUrl).then((res) => res.json());
-        mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADED;
-        res(data);
-      } catch (e) {
-        mfDataFetch[2] = MF_DATA_FETCH_STATUS.ERROR;
-        rej(e);
-      }
-    }
-
-    return promise;
-  }
-}
diff --git a/packages/modernjs/src/ssr-runtime/injectDataFetchFunctionPlugin.tsx b/packages/modernjs/src/ssr-runtime/injectDataFetchFunctionPlugin.tsx
index 62e15de8d9b..0c3c15628aa 100644
--- a/packages/modernjs/src/ssr-runtime/injectDataFetchFunctionPlugin.tsx
+++ b/packages/modernjs/src/ssr-runtime/injectDataFetchFunctionPlugin.tsx
@@ -1,30 +1,8 @@
-import {
-  DATA_FETCH_FUNCTION,
-  DOWNGRADE_KEY,
-  FS_HREF,
-  MF_DATA_FETCH_STATUS,
-  MF_DATA_FETCH_TYPE,
-} from '../constant';
-import logger from '../logger';
-import { getDataFetchMap, getDataFetchItem, initDataFetchMap } from '../utils';
-import { callAllDowngrade, callDowngrade, getDowngradeTag } from './downgrade';
+import { callDataFetch } from '@module-federation/bridge-react/data-fetch-utils';
+import { setSSREnv } from '@module-federation/bridge-react/lazy-utils';
 
 import type { RuntimePluginFuture } from '@modern-js/runtime';
 
-type dataFetchFunctionOptions = [
-  id?: string,
-  data?: unknown,
-  downgrade?: boolean,
-];
-export function setSSREnv({
-  fetchServerQuery,
-}: {
-  fetchServerQuery?: Record<string, unknown>;
-}) {
-  globalThis.FEDERATION_SSR = true;
-  globalThis.FEDERATION_SERVER_QUERY = fetchServerQuery;
-}
-
 export const injectDataFetchFunctionPlugin = ({
   fetchServerQuery,
 }: {
@@ -35,95 +13,8 @@ export const injectDataFetchFunctionPlugin = ({
   setup: (api) => {
     api.onBeforeRender(async () => {
       setSSREnv({ fetchServerQuery });
-      if (typeof window === 'undefined') {
-        return;
-      }
-      const dataFetchFunction = async function (
-        options: dataFetchFunctionOptions,
-      ) {
-        const [id, data, downgrade] = options;
-        logger.debug('==========call data fetch function!');
-        if (data) {
-          if (!id) {
-            throw new Error('id is required!');
-          }
-          if (!getDataFetchMap()) {
-            initDataFetchMap();
-          }
-          const dataFetchItem = getDataFetchItem(id);
-          if (dataFetchItem) {
-            dataFetchItem[1]?.[1]?.(data);
-            dataFetchItem[2] = MF_DATA_FETCH_STATUS.LOADED;
-            return;
-          }
-          if (!dataFetchItem) {
-            const dataFetchMap = getDataFetchMap();
-            let res;
-            let rej;
-            const p = new Promise((resolve, reject) => {
-              res = resolve;
-              rej = reject;
-            });
-
-            dataFetchMap[id] = [
-              [
-                async () => async () => {
-                  return '';
-                },
-                MF_DATA_FETCH_TYPE.FETCH_SERVER,
-              ],
-              [p, res, rej],
-              MF_DATA_FETCH_STATUS.LOADED,
-            ];
-            res(data);
-            return;
-          }
-        }
-
-        if (downgrade) {
-          const mfDowngrade = getDowngradeTag();
-          if (!mfDowngrade) {
-            globalThis[DOWNGRADE_KEY] = id ? [id] : true;
-          } else if (
-            Array.isArray(mfDowngrade) &&
-            id &&
-            !mfDowngrade.includes(id)
-          ) {
-            mfDowngrade.push(id);
-          }
-        }
-
-        const mfDowngrade = getDowngradeTag();
-
-        if (typeof mfDowngrade === 'boolean') {
-          return callAllDowngrade();
-        }
-        if (Array.isArray(mfDowngrade)) {
-          if (!id) {
-            globalThis[DOWNGRADE_KEY] = true;
-            return callAllDowngrade();
-          }
-
-          if (!mfDowngrade.includes(id)) {
-            mfDowngrade.push(id);
-          }
-
-          return callDowngrade(id);
-        }
-      };
-      globalThis[FS_HREF] = window.location.href;
-      globalThis[DATA_FETCH_FUNCTION] ||= [];
-      const dataFetch: Array<dataFetchFunctionOptions> =
-        globalThis[DATA_FETCH_FUNCTION];
-
-      await Promise.all(
-        dataFetch.map(async (options) => {
-          await dataFetchFunction(options);
-        }),
-      );
 
-      // @ts-ignore
-      dataFetch.push = dataFetchFunction;
+      await callDataFetch();
     });
   },
 });
diff --git a/packages/modernjs/src/utils/dataFetch.ts b/packages/modernjs/src/utils/dataFetch.ts
deleted file mode 100644
index bca456a7300..00000000000
--- a/packages/modernjs/src/utils/dataFetch.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import { isBrowserEnv, composeKeyWithSeparator } from '@module-federation/sdk';
-import { isCSROnly } from '../utils';
-import logger from '../logger';
-import { callDowngrade, getDowngradeTag } from '../ssr-runtime/downgrade';
-import {
-  DOWNGRADE_KEY,
-  MF_DATA_FETCH_STATUS,
-  WRAP_DATA_FETCH_ID_IDENTIFIER,
-} from '../constant';
-import {
-  DATA_FETCH_CLIENT_SUFFIX,
-  DATA_FETCH_IDENTIFIER,
-} from '@module-federation/rsbuild-plugin/constant';
-
-import type { GlobalModuleInfo } from '@module-federation/sdk';
-import type {
-  DataFetchParams,
-  MF_DATA_FETCH_MAP,
-  NoSSRRemoteInfo,
-} from '../interfaces/global';
-import type { FederationHost } from '@module-federation/enhanced/runtime';
-
-export const getDataFetchInfo = ({
-  name,
-  alias,
-  id,
-  remoteSnapshot,
-}: {
-  id: string;
-  name: string;
-  remoteSnapshot: GlobalModuleInfo[string];
-  alias?: string;
-}) => {
-  if (!remoteSnapshot) {
-    return;
-  }
-  if (!('modules' in remoteSnapshot)) {
-    return;
-  }
-  const regex = new RegExp(`^${name}(/[^/].*|)$`);
-  const nameOrAlias = regex.test(id) ? name : alias || name;
-
-  const expose = id.replace(nameOrAlias, '');
-  let dataFetchName = '';
-  let dataFetchId = '';
-  if (expose.startsWith('/')) {
-    dataFetchName = `${expose.slice(1)}.${DATA_FETCH_IDENTIFIER}`;
-    dataFetchId = `${id}.${DATA_FETCH_IDENTIFIER}`;
-  } else if (expose === '') {
-    dataFetchName = DATA_FETCH_IDENTIFIER;
-    dataFetchId = `${id}/${DATA_FETCH_IDENTIFIER}`;
-  } else {
-    return;
-  }
-
-  if (!dataFetchName || !dataFetchId) {
-    return;
-  }
-
-  if (
-    !remoteSnapshot.modules.find(
-      (module) => module.moduleName === dataFetchName,
-    )
-  ) {
-    return;
-  }
-
-  return {
-    dataFetchName,
-    dataFetchId,
-  };
-};
-
-export function initDataFetchMap() {
-  globalThis.__MF_DATA_FETCH_MAP__ ||= {};
-}
-
-export function getDataFetchItem(id: string) {
-  return (globalThis.__MF_DATA_FETCH_MAP__ as MF_DATA_FETCH_MAP)?.[id];
-}
-
-export function getDataFetchMap() {
-  return globalThis.__MF_DATA_FETCH_MAP__ as MF_DATA_FETCH_MAP;
-}
-
-export const flushDataFetch = () => {
-  globalThis.__MF_DATA_FETCH_MAP__ = {};
-  globalThis[DOWNGRADE_KEY] = undefined;
-};
-
-export function setDataFetchItemLoadedStatus(id: string) {
-  const dataFetchItem = getDataFetchItem(id);
-  if (!dataFetchItem) {
-    return;
-  }
-  dataFetchItem[2] = MF_DATA_FETCH_STATUS.LOADED;
-}
-
-export const wrapDataFetchId = (id?: string) => {
-  return `${WRAP_DATA_FETCH_ID_IDENTIFIER}${id}${WRAP_DATA_FETCH_ID_IDENTIFIER}`;
-};
-
-export const getDataFetchIdWithErrorMsgs = (errMsgs: string) => {
-  const firstIdentifierIndex = errMsgs.indexOf(WRAP_DATA_FETCH_ID_IDENTIFIER);
-  if (firstIdentifierIndex === -1) {
-    return undefined;
-  }
-
-  const secondIdentifierIndex = errMsgs.indexOf(
-    WRAP_DATA_FETCH_ID_IDENTIFIER,
-    firstIdentifierIndex + WRAP_DATA_FETCH_ID_IDENTIFIER.length,
-  );
-
-  if (secondIdentifierIndex === -1) {
-    return undefined;
-  }
-
-  return errMsgs.substring(
-    firstIdentifierIndex + WRAP_DATA_FETCH_ID_IDENTIFIER.length,
-    secondIdentifierIndex,
-  );
-};
-
-export async function fetchData(
-  id: string,
-  params: DataFetchParams,
-  remoteInfo?: NoSSRRemoteInfo,
-): Promise<unknown | undefined> {
-  const callFetchData = async () => {
-    const item = getDataFetchItem(id);
-    if (!item) {
-      return;
-    }
-    const [fetchDataFnArr, ..._rest] = item;
-
-    const fetchDataFn = await fetchDataFnArr[2];
-    if (!fetchDataFn) {
-      return;
-    }
-    return fetchDataFn(params);
-  };
-  if (isBrowserEnv()) {
-    const dataFetchItem = getDataFetchItem(id);
-    if (!dataFetchItem) {
-      throw new Error(`dataFetchItem not found, id: ${id}`);
-    }
-    if (dataFetchItem[1]?.[0]) {
-      return dataFetchItem[1][0];
-    }
-
-    if (isCSROnly()) {
-      logger.debug('==========csr only!');
-      return callFetchData();
-    }
-
-    if (remoteInfo) {
-      return callDowngrade(id, params, remoteInfo);
-    }
-
-    const mfDowngrade = getDowngradeTag();
-    if (mfDowngrade) {
-      if (typeof mfDowngrade === 'boolean') {
-        return callDowngrade(id, { ...params, isDowngrade: true });
-      }
-      if (mfDowngrade.includes(id)) {
-        return callDowngrade(id, { ...params, isDowngrade: true });
-      }
-    }
-
-    let res;
-    let rej;
-    const p = new Promise((resolve, reject) => {
-      res = resolve;
-      rej = reject;
-    });
-    dataFetchItem[1] = [p, res, rej];
-    dataFetchItem[2] = MF_DATA_FETCH_STATUS.AWAIT;
-    return dataFetchItem[1][0];
-  }
-
-  return callFetchData();
-}
-
-export function getDataFetchMapKey(
-  dataFetchInfo?: ReturnType<typeof getDataFetchInfo>,
-  hostInfo?: { name: string; version?: string },
-) {
-  if (!dataFetchInfo || !hostInfo) {
-    return;
-  }
-
-  const { dataFetchId } = dataFetchInfo;
-
-  return composeKeyWithSeparator(dataFetchId, hostInfo.name, hostInfo.version);
-}
-
-export async function loadDataFetchModule(
-  instance: FederationHost,
-  id: string,
-) {
-  return instance.loadRemote(id).then((m) => {
-    if (
-      m &&
-      typeof m === 'object' &&
-      'fetchData' in m &&
-      typeof m.fetchData === 'function'
-    ) {
-      return m.fetchData as (params: DataFetchParams) => Promise<unknown>;
-    }
-    throw new Error(
-      `fetchData not found in remote ${id}, ${JSON.stringify(m)}`,
-    );
-  });
-}
-
-export function isDataLoaderExpose(exposeKey: string) {
-  return (
-    exposeKey.endsWith(DATA_FETCH_IDENTIFIER) ||
-    exposeKey.endsWith(DATA_FETCH_CLIENT_SUFFIX)
-  );
-}
diff --git a/packages/modernjs/src/utils/index.ts b/packages/modernjs/src/utils/index.ts
deleted file mode 100644
index 9cb30ab3514..00000000000
--- a/packages/modernjs/src/utils/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { FederationHost } from '@module-federation/enhanced/runtime';
-
-export function getLoadedRemoteInfos(
-  id: string,
-  instance: FederationHost | null,
-) {
-  if (!instance) {
-    return;
-  }
-  const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
-  if (!name) {
-    return;
-  }
-  const module = instance.moduleCache.get(name);
-  if (!module) {
-    return;
-  }
-  const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(
-    module.remoteInfo,
-  );
-  return {
-    ...module.remoteInfo,
-    snapshot: remoteSnapshot,
-    expose,
-  };
-}
-
-export function isCSROnly() {
-  return window._SSR_DATA === undefined;
-}
-
-export * from './dataFetch';
diff --git a/packages/runtime-core/src/core.ts b/packages/runtime-core/src/core.ts
index ae9451f8444..9859848210b 100644
--- a/packages/runtime-core/src/core.ts
+++ b/packages/runtime-core/src/core.ts
@@ -323,14 +323,7 @@ export class FederationHost {
   }
 
   registerPlugins(plugins: UserOptions['plugins']) {
-    const pluginRes = registerPlugins(plugins, [
-      this.hooks,
-      this.remoteHandler.hooks,
-      this.sharedHandler.hooks,
-      this.snapshotHandler.hooks,
-      this.loaderHook,
-      this.bridgeHook,
-    ]);
+    const pluginRes = registerPlugins(plugins, this);
     // Merge plugin
     this.options.plugins = this.options.plugins.reduce((res, plugin) => {
       if (!plugin) return res;
diff --git a/packages/runtime-core/src/helpers.ts b/packages/runtime-core/src/helpers.ts
index 8f4560bb3ba..e8fc734ae03 100644
--- a/packages/runtime-core/src/helpers.ts
+++ b/packages/runtime-core/src/helpers.ts
@@ -18,7 +18,8 @@ import {
   Global,
 } from './global';
 import { getRegisteredShare, getGlobalShareScope } from './utils/share';
-
+import { getRemoteInfo, matchRemoteWithNameAndExpose } from './utils';
+import { preloadAssets } from './utils/preload';
 interface IShareUtils {
   getRegisteredShare: typeof getRegisteredShare;
   getGlobalShareScope: typeof getGlobalShareScope;
@@ -71,6 +72,11 @@ const GlobalUtils: IGlobalUtils = {
 export default {
   global: GlobalUtils,
   share: ShareUtils,
+  utils: {
+    matchRemoteWithNameAndExpose,
+    preloadAssets,
+    getRemoteInfo,
+  },
 };
 
 export type { IGlobalUtils, IShareUtils };
diff --git a/packages/runtime-core/src/type/plugin.ts b/packages/runtime-core/src/type/plugin.ts
index 2d57568220b..63685ed5070 100644
--- a/packages/runtime-core/src/type/plugin.ts
+++ b/packages/runtime-core/src/type/plugin.ts
@@ -44,4 +44,5 @@ export type FederationRuntimePlugin = CoreLifeCyclePartial &
   ModuleBridgeLifeCycleCyclePartial & {
     name: string;
     version?: string;
+    apply?: (instance: FederationHost) => void;
   };
diff --git a/packages/runtime-core/src/utils/hooks/pluginSystem.ts b/packages/runtime-core/src/utils/hooks/pluginSystem.ts
index b53518c667b..c73c0ddff05 100644
--- a/packages/runtime-core/src/utils/hooks/pluginSystem.ts
+++ b/packages/runtime-core/src/utils/hooks/pluginSystem.ts
@@ -1,3 +1,4 @@
+import type { FederationHost } from '../../core';
 import { assert, isPlainObject } from '../../utils';
 
 export type Plugin<T extends Record<string, any>> = {
@@ -5,6 +6,7 @@ export type Plugin<T extends Record<string, any>> = {
 } & {
   name: string;
   version?: string;
+  apply?: (instance: FederationHost) => void;
 };
 
 export class PluginSystem<T extends Record<string, any>> {
@@ -17,7 +19,7 @@ export class PluginSystem<T extends Record<string, any>> {
     this.lifecycleKeys = Object.keys(lifecycle);
   }
 
-  applyPlugin(plugin: Plugin<T>): void {
+  applyPlugin(plugin: Plugin<T>, instance: FederationHost): void {
     assert(isPlainObject(plugin), 'Plugin configuration is invalid.');
     // The plugin's name is mandatory and must be unique
     const pluginName = plugin.name;
@@ -25,6 +27,7 @@ export class PluginSystem<T extends Record<string, any>> {
 
     if (!this.registerPlugins[pluginName]) {
       this.registerPlugins[pluginName] = plugin;
+      plugin.apply?.(instance);
 
       Object.keys(this.lifecycle).forEach((key) => {
         const pluginLife = plugin[key as string];
@@ -46,28 +49,4 @@ export class PluginSystem<T extends Record<string, any>> {
       }
     });
   }
-
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  inherit<T extends PluginSystem<any>>({
-    lifecycle,
-    registerPlugins,
-  }: T): void {
-    Object.keys(lifecycle).forEach((hookName) => {
-      assert(
-        !this.lifecycle[hookName],
-        `The hook "${
-          hookName as string
-        }" has a conflict and cannot be inherited.`,
-      );
-      (this.lifecycle as any)[hookName] = lifecycle[hookName];
-    });
-
-    Object.keys(registerPlugins).forEach((pluginName) => {
-      assert(
-        !this.registerPlugins[pluginName],
-        `The plugin "${pluginName}" has a conflict and cannot be inherited.`,
-      );
-      this.applyPlugin(registerPlugins[pluginName]);
-    });
-  }
 }
diff --git a/packages/runtime-core/src/utils/plugin.ts b/packages/runtime-core/src/utils/plugin.ts
index 36f84a26ad7..f5dffae044c 100644
--- a/packages/runtime-core/src/utils/plugin.ts
+++ b/packages/runtime-core/src/utils/plugin.ts
@@ -1,20 +1,20 @@
 import { FederationHost } from '../core';
 import { UserOptions } from '../type';
-import { Module } from '../module';
 import { getGlobalHostPlugins } from '../global';
 
 export function registerPlugins(
   plugins: UserOptions['plugins'],
-  hookInstances: Array<
-    | FederationHost['hooks']
-    | FederationHost['snapshotHandler']['hooks']
-    | FederationHost['sharedHandler']['hooks']
-    | FederationHost['remoteHandler']['hooks']
-    | Module['host']['loaderHook']
-    | Module['host']['bridgeHook']
-  >,
+  instance: FederationHost,
 ) {
   const globalPlugins = getGlobalHostPlugins();
+  const hookInstances = [
+    instance.hooks,
+    instance.remoteHandler.hooks,
+    instance.sharedHandler.hooks,
+    instance.snapshotHandler.hooks,
+    instance.loaderHook,
+    instance.bridgeHook,
+  ];
   // Incorporate global plugins
   if (globalPlugins.length > 0) {
     globalPlugins.forEach((plugin) => {
@@ -27,7 +27,7 @@ export function registerPlugins(
   if (plugins && plugins.length > 0) {
     plugins.forEach((plugin) => {
       hookInstances.forEach((hookInstance) => {
-        hookInstance.applyPlugin(plugin);
+        hookInstance.applyPlugin(plugin, instance);
       });
     });
   }
diff --git a/packages/runtime/src/helpers.ts b/packages/runtime/src/helpers.ts
index ee21f6d2e5d..5a252c2846f 100644
--- a/packages/runtime/src/helpers.ts
+++ b/packages/runtime/src/helpers.ts
@@ -1,14 +1,21 @@
 import { helpers } from '@module-federation/runtime-core';
 import { getGlobalFederationInstance } from './utils';
+
 export type {
   IGlobalUtils,
   IShareUtils,
 } from '@module-federation/runtime-core';
 
 export default {
+  ...helpers,
   global: {
     ...helpers.global,
     getGlobalFederationInstance,
   },
-  share: helpers.share,
+} as {
+  global: typeof helpers.global & {
+    getGlobalFederationInstance: typeof getGlobalFederationInstance;
+  };
+  share: typeof helpers.share;
+  utils: typeof helpers.utils;
 };
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index acac35e38d3..137746e9888 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -7,7 +7,8 @@ export {
   simpleJoinRemoteEntry,
   inferAutoPublicPath,
 } from './generateSnapshotFromManifest';
-export * from './logger';
+export { logger, createLogger } from './logger';
+export type { Logger } from './logger';
 export * from './env';
 export * from './dom';
 export * from './node';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 340508b16a9..c20a49a998a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -899,6 +899,9 @@ importers:
 
   apps/modern-component-data-fetch/provider-csr:
     devDependencies:
+      '@module-federation/bridge-react':
+        specifier: workspace:*
+        version: link:../../../packages/bridge/bridge-react
       '@module-federation/enhanced':
         specifier: workspace:*
         version: link:../../../packages/enhanced
@@ -2205,6 +2208,9 @@ importers:
       '@module-federation/sdk':
         specifier: workspace:*
         version: link:../../sdk
+      lru-cache:
+        specifier: ^10.4.3
+        version: 10.4.3
       react-error-boundary:
         specifier: ^4.1.2
         version: 4.1.2(react@18.3.1)
@@ -2212,6 +2218,9 @@ importers:
       '@module-federation/runtime':
         specifier: workspace:*
         version: link:../../runtime
+      '@module-federation/runtime-core':
+        specifier: workspace:*
+        version: link:../../runtime-core
       '@testing-library/react':
         specifier: 15.0.7
         version: 15.0.7(@types/react@18.2.79)(react-dom@18.3.1)(react@18.3.1)
@@ -2230,6 +2239,9 @@ importers:
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.0.0
         version: 4.0.1(vite@5.4.18)(vue@3.5.13)
+      hono:
+        specifier: 3.12.12
+        version: 3.12.12
       jsdom:
         specifier: ^24.1.0
         version: 24.1.3
@@ -2250,7 +2262,7 @@ importers:
         version: 5.4.18(@types/node@18.16.9)(less@4.3.0)(stylus@0.64.0)
       vite-plugin-dts:
         specifier: ^4.3.0
-        version: 4.3.0(@types/node@18.16.9)(rollup@4.40.0)(typescript@5.5.2)(vite@5.4.18)
+        version: 4.5.4(@types/node@18.16.9)(rollup@4.40.0)(typescript@5.5.2)(vite@5.4.18)
 
   packages/bridge/bridge-react-webpack-plugin:
     dependencies:
@@ -2784,6 +2796,9 @@ importers:
       '@modern-js/utils':
         specifier: 2.67.5
         version: 2.67.5
+      '@module-federation/bridge-react':
+        specifier: workspace:*
+        version: link:../bridge/bridge-react
       '@module-federation/cli':
         specifier: workspace:*
         version: link:../cli
@@ -3673,7 +3688,7 @@ packages:
       '@babel/traverse': 7.27.1
       '@babel/types': 7.27.1
       convert-source-map: 1.9.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       lodash: 4.17.21
@@ -3721,7 +3736,7 @@ packages:
       '@babel/traverse': 7.27.1
       '@babel/types': 7.27.1
       convert-source-map: 2.0.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -3744,7 +3759,7 @@ packages:
       '@babel/traverse': 7.26.9
       '@babel/types': 7.27.0
       convert-source-map: 2.0.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -3766,7 +3781,7 @@ packages:
       '@babel/traverse': 7.27.1
       '@babel/types': 7.27.1
       convert-source-map: 2.0.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -4045,7 +4060,7 @@ packages:
       '@babel/core': 7.26.10
       '@babel/helper-compilation-targets': 7.25.9
       '@babel/helper-plugin-utils': 7.25.9
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -4587,7 +4602,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.10
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
       '@babel/plugin-syntax-export-default-from': 7.24.7(@babel/core@7.26.10)
     dev: true
 
@@ -4620,7 +4635,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.10
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
       '@babel/plugin-syntax-partial-application': 7.24.7(@babel/core@7.26.10)
     dev: true
 
@@ -4641,7 +4656,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.10
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
       '@babel/plugin-syntax-pipeline-operator': 7.24.7(@babel/core@7.26.10)
     dev: true
 
@@ -4783,7 +4798,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.10
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
     dev: true
 
   /@babel/plugin-syntax-flow@7.25.7(@babel/core@7.26.10):
@@ -5051,7 +5066,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.10
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
     dev: true
 
   /@babel/plugin-syntax-pipeline-operator@7.24.7(@babel/core@7.26.10):
@@ -5061,7 +5076,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.10
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
     dev: true
 
   /@babel/plugin-syntax-pipeline-operator@7.25.7(@babel/core@7.26.10):
@@ -5071,7 +5086,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.10
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
     dev: true
 
   /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.25.2):
@@ -5698,7 +5713,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
     dev: true
 
   /@babel/plugin-transform-react-jsx-source@7.24.7(@babel/core@7.26.0):
@@ -5708,7 +5723,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
     dev: true
 
   /@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.25.2):
@@ -5811,7 +5826,7 @@ packages:
     dependencies:
       '@babel/core': 7.26.10
       '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.27.1
       babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.26.10)
       babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.26.10)
       babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.26.10)
@@ -6225,7 +6240,7 @@ packages:
       '@babel/parser': 7.27.2
       '@babel/template': 7.25.9
       '@babel/types': 7.27.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -6239,7 +6254,7 @@ packages:
       '@babel/parser': 7.27.2
       '@babel/template': 7.26.9
       '@babel/types': 7.27.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -6253,7 +6268,7 @@ packages:
       '@babel/parser': 7.27.2
       '@babel/template': 7.27.0
       '@babel/types': 7.27.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -6268,7 +6283,7 @@ packages:
       '@babel/parser': 7.27.2
       '@babel/template': 7.27.2
       '@babel/types': 7.27.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -8746,7 +8761,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.2
@@ -8763,7 +8778,7 @@ packages:
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       espree: 10.3.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -8852,7 +8867,7 @@ packages:
     deprecated: Use @eslint/config-array instead
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -8863,7 +8878,7 @@ packages:
     deprecated: Use @eslint/config-array instead
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -9599,6 +9614,16 @@ packages:
       - '@types/node'
     dev: true
 
+  /@microsoft/api-extractor-model@7.30.6(@types/node@18.16.9):
+    resolution: {integrity: sha512-znmFn69wf/AIrwHya3fxX6uB5etSIn6vg4Q4RB/tb5VDDs1rqREc+AvMC/p19MUN13CZ7+V/8pkYPTj7q8tftg==}
+    dependencies:
+      '@microsoft/tsdoc': 0.15.1
+      '@microsoft/tsdoc-config': 0.17.1
+      '@rushstack/node-core-library': 5.13.1(@types/node@18.16.9)
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
   /@microsoft/api-extractor@7.47.11(@types/node@16.11.68):
     resolution: {integrity: sha512-lrudfbPub5wzBhymfFtgZKuBvXxoSIAdrvS2UbHjoMT2TjIEddq6Z13pcve7A03BAouw0x8sW8G4txdgfiSwpQ==}
     hasBin: true
@@ -9641,6 +9666,27 @@ packages:
       - '@types/node'
     dev: true
 
+  /@microsoft/api-extractor@7.52.8(@types/node@18.16.9):
+    resolution: {integrity: sha512-cszYIcjiNscDoMB1CIKZ3My61+JOhpERGlGr54i6bocvGLrcL/wo9o+RNXMBrb7XgLtKaizZWUpqRduQuHQLdg==}
+    hasBin: true
+    dependencies:
+      '@microsoft/api-extractor-model': 7.30.6(@types/node@18.16.9)
+      '@microsoft/tsdoc': 0.15.1
+      '@microsoft/tsdoc-config': 0.17.1
+      '@rushstack/node-core-library': 5.13.1(@types/node@18.16.9)
+      '@rushstack/rig-package': 0.5.3
+      '@rushstack/terminal': 0.15.3(@types/node@18.16.9)
+      '@rushstack/ts-command-line': 5.0.1(@types/node@18.16.9)
+      lodash: 4.17.21
+      minimatch: 3.0.8
+      resolve: 1.22.8
+      semver: 7.5.4
+      source-map: 0.6.1
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
   /@microsoft/tsdoc-config@0.17.0:
     resolution: {integrity: sha512-v/EYRXnCAIHxOHW+Plb6OWuUoMotxTN0GLatnpOb1xq0KuTNw/WI3pamJx/UbsoJP5k9MCw1QxvvhPcF9pH3Zg==}
     dependencies:
@@ -9650,10 +9696,23 @@ packages:
       resolve: 1.22.8
     dev: true
 
+  /@microsoft/tsdoc-config@0.17.1:
+    resolution: {integrity: sha512-UtjIFe0C6oYgTnad4q1QP4qXwLhe6tIpNTRStJ2RZEPIkqQPREAwE5spzVxsdn9UaEMUqhh0AqSx3X4nWAKXWw==}
+    dependencies:
+      '@microsoft/tsdoc': 0.15.1
+      ajv: 8.12.0
+      jju: 1.4.0
+      resolve: 1.22.8
+    dev: true
+
   /@microsoft/tsdoc@0.15.0:
     resolution: {integrity: sha512-HZpPoABogPvjeJOdzCOSJsXeL/SMCBgBZMVC3X3d7YYp2gf31MfxhUoYUNwf1ERPJOnQc0wkFn9trqI6ZEdZuA==}
     dev: true
 
+  /@microsoft/tsdoc@0.15.1:
+    resolution: {integrity: sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==}
+    dev: true
+
   /@modern-js-app/eslint-config@2.54.6(@swc/helpers@0.5.13)(typescript@5.0.4):
     resolution: {integrity: sha512-2mA5jIo6pRDTBCNZsWp8pKr5Do4PH/kQieyBGAsm6OcOJoCf7rQ8bpHDYwkPdEOmBWIm8MsSlYTwQ0Vrk52gaA==}
     peerDependencies:
@@ -10156,7 +10215,7 @@ packages:
       '@ampproject/remapping': 2.3.0
       '@ast-grep/napi': 0.35.0
       '@babel/core': 7.26.10
-      '@babel/types': 7.27.0
+      '@babel/types': 7.27.1
       '@modern-js/core': 2.67.6
       '@modern-js/plugin': 2.67.6
       '@modern-js/plugin-changeset': 2.67.6
@@ -10198,7 +10257,7 @@ packages:
       '@ampproject/remapping': 2.3.0
       '@ast-grep/napi': 0.35.0
       '@babel/core': 7.26.10
-      '@babel/types': 7.27.0
+      '@babel/types': 7.27.1
       '@modern-js/core': 2.67.6
       '@modern-js/plugin': 2.67.6
       '@modern-js/plugin-changeset': 2.67.6
@@ -12048,7 +12107,7 @@ packages:
       '@open-draft/until': 1.0.3
       '@types/debug': 4.1.12
       '@xmldom/xmldom': 0.8.10
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       headers-polyfill: 3.2.5
       outvariant: 1.4.3
       strict-event-emitter: 0.2.8
@@ -16226,6 +16285,18 @@ packages:
       - webpack-hot-middleware
     dev: true
 
+  /@rsbuild/plugin-react@1.3.2(@rsbuild/core@1.3.20):
+    resolution: {integrity: sha512-H4blXmgvVOrQlVy4ZfJ5IGfQIF5uKwtkGzwVnEsn1HN7DRRI9VlFrcuXj6+e3GigvYxg6TDHAAUJi6FoIGbnKQ==}
+    peerDependencies:
+      '@rsbuild/core': 1.x
+    dependencies:
+      '@rsbuild/core': 1.3.20
+      '@rspack/plugin-react-refresh': 1.4.3(react-refresh@0.17.0)
+      react-refresh: 0.17.0
+    transitivePeerDependencies:
+      - webpack-hot-middleware
+    dev: true
+
   /@rsbuild/plugin-react@1.3.2(@rsbuild/core@1.3.22):
     resolution: {integrity: sha512-H4blXmgvVOrQlVy4ZfJ5IGfQIF5uKwtkGzwVnEsn1HN7DRRI9VlFrcuXj6+e3GigvYxg6TDHAAUJi6FoIGbnKQ==}
     peerDependencies:
@@ -16259,7 +16330,7 @@ packages:
       '@rsbuild/core': 1.3.20
       deepmerge: 4.3.1
       loader-utils: 2.0.4
-      postcss: 8.5.3
+      postcss: 8.5.4
       reduce-configs: 1.1.0
       sass-embedded: 1.89.0
     dev: true
@@ -16310,7 +16381,7 @@ packages:
       '@rsbuild/core': 1.x
     dependencies:
       '@rsbuild/core': 1.3.20
-      '@rsbuild/plugin-react': 1.3.1(@rsbuild/core@1.3.20)
+      '@rsbuild/plugin-react': 1.3.2(@rsbuild/core@1.3.20)
       '@svgr/core': 8.1.0(typescript@5.0.4)
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)
       '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.0.4)
@@ -16328,7 +16399,7 @@ packages:
       '@rsbuild/core': 1.x
     dependencies:
       '@rsbuild/core': 1.3.20
-      '@rsbuild/plugin-react': 1.3.1(@rsbuild/core@1.3.20)
+      '@rsbuild/plugin-react': 1.3.2(@rsbuild/core@1.3.20)
       '@svgr/core': 8.1.0(typescript@5.5.2)
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)
       '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.5.2)
@@ -17683,6 +17754,25 @@ packages:
     resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==}
     dev: true
 
+  /@rushstack/node-core-library@5.13.1(@types/node@18.16.9):
+    resolution: {integrity: sha512-5yXhzPFGEkVc9Fu92wsNJ9jlvdwz4RNb2bMso+/+TH0nMm1jDDDsOIf4l8GAkPxGuwPw5DH24RliWVfSPhlW/Q==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@types/node': 18.16.9
+      ajv: 8.13.0
+      ajv-draft-04: 1.0.0(ajv@8.13.0)
+      ajv-formats: 3.0.1(ajv@8.13.0)
+      fs-extra: 11.3.0
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.8
+      semver: 7.5.4
+    dev: true
+
   /@rushstack/node-core-library@5.9.0(@types/node@16.11.68):
     resolution: {integrity: sha512-MMsshEWkTbXqxqFxD4gcIUWQOCeBChlGczdZbHfqmNZQFLHB3yWxDFSMHFUdu2/OB9NUk7Awn5qRL+rws4HQNg==}
     peerDependencies:
@@ -17754,6 +17844,19 @@ packages:
       supports-color: 8.1.1
     dev: true
 
+  /@rushstack/terminal@0.15.3(@types/node@18.16.9):
+    resolution: {integrity: sha512-DGJ0B2Vm69468kZCJkPj3AH5nN+nR9SPmC0rFHtzsS4lBQ7/dgOwtwVxYP7W9JPDMuRBkJ4KHmWKr036eJsj9g==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@rushstack/node-core-library': 5.13.1(@types/node@18.16.9)
+      '@types/node': 18.16.9
+      supports-color: 8.1.1
+    dev: true
+
   /@rushstack/ts-command-line@4.23.0(@types/node@16.11.68):
     resolution: {integrity: sha512-jYREBtsxduPV6ptNq8jOKp9+yx0ld1Tb/Tkdnlj8gTjazl1sF3DwX2VbluyYrNd0meWIL0bNeer7WDf5tKFjaQ==}
     dependencies:
@@ -17776,6 +17879,17 @@ packages:
       - '@types/node'
     dev: true
 
+  /@rushstack/ts-command-line@5.0.1(@types/node@18.16.9):
+    resolution: {integrity: sha512-bsbUucn41UXrQK7wgM8CNM/jagBytEyJqXw/umtI8d68vFm1Jwxh1OtLrlW7uGZgjCWiiPH6ooUNa1aVsuVr3Q==}
+    dependencies:
+      '@rushstack/terminal': 0.15.3(@types/node@18.16.9)
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      string-argv: 0.3.2
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
   /@sec-ant/readable-stream@0.4.1:
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
     dev: true
@@ -17810,7 +17924,7 @@ packages:
       conventional-changelog-writer: 8.0.1
       conventional-commits-filter: 5.0.0
       conventional-commits-parser: 6.1.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       import-from-esm: 2.0.0
       lodash-es: 4.17.21
       micromatch: 4.0.8
@@ -17877,7 +17991,7 @@ packages:
       '@octokit/plugin-throttling': 9.4.0(@octokit/core@6.1.4)
       '@semantic-release/error': 4.0.0
       aggregate-error: 5.0.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       dir-glob: 3.0.1
       globby: 14.1.0
       http-proxy-agent: 7.0.2
@@ -17946,7 +18060,7 @@ packages:
       conventional-changelog-writer: 8.0.1
       conventional-commits-filter: 5.0.0
       conventional-commits-parser: 6.1.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       get-stream: 7.0.1
       import-from-esm: 2.0.0
       into-stream: 7.0.0
@@ -19134,7 +19248,7 @@ packages:
       typescript: '>= 3.x'
       webpack: '>= 4'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       endent: 2.1.0
       find-cache-dir: 3.3.2
       flat-cache: 3.2.0
@@ -19153,7 +19267,7 @@ packages:
       typescript: '>= 4.x'
       webpack: '>= 4'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       endent: 2.1.0
       find-cache-dir: 3.3.2
       flat-cache: 3.2.0
@@ -19172,7 +19286,7 @@ packages:
       typescript: '>= 4.x'
       webpack: '>= 4'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       endent: 2.1.0
       find-cache-dir: 3.3.2
       flat-cache: 3.2.0
@@ -19642,7 +19756,7 @@ packages:
       '@swc-node/sourcemap-support': 0.5.1
       '@swc/core': 1.7.26(@swc/helpers@0.5.13)
       colorette: 2.0.20
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       oxc-resolver: 5.2.0
       pirates: 4.0.7
       tslib: 2.8.1
@@ -20160,8 +20274,8 @@ packages:
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
-      '@babel/parser': 7.26.9
-      '@babel/types': 7.27.0
+      '@babel/parser': 7.27.2
+      '@babel/types': 7.27.1
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.20.6
@@ -21076,7 +21190,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/type-utils': 5.62.0(eslint@8.57.1)(typescript@5.0.4)
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.0.4)
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       eslint: 8.57.1
       graphemer: 1.4.0
       ignore: 5.3.2
@@ -21128,7 +21242,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.0.4)
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       eslint: 8.57.1
       typescript: 5.0.4
     transitivePeerDependencies:
@@ -21149,7 +21263,7 @@ packages:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       eslint: 8.57.1
       typescript: 5.7.3
     transitivePeerDependencies:
@@ -21170,7 +21284,7 @@ packages:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       eslint: 9.0.0
       typescript: 5.4.5
     transitivePeerDependencies:
@@ -21250,7 +21364,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.0.4)
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.0.4)
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       eslint: 8.57.1
       tsutils: 3.21.0(typescript@5.0.4)
       typescript: 5.0.4
@@ -21270,7 +21384,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.7.3)
       '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.7.3)
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       eslint: 8.57.1
       ts-api-utils: 1.3.0(typescript@5.7.3)
       typescript: 5.7.3
@@ -21289,7 +21403,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 8.8.0(typescript@5.7.3)
       '@typescript-eslint/utils': 8.8.0(eslint@8.57.1)(typescript@5.7.3)
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       ts-api-utils: 1.3.0(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
@@ -21333,7 +21447,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.3
@@ -21354,7 +21468,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -21376,7 +21490,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -21398,7 +21512,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -21420,7 +21534,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 8.14.0
       '@typescript-eslint/visitor-keys': 8.14.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -21442,7 +21556,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 8.8.0
       '@typescript-eslint/visitor-keys': 8.8.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -21791,7 +21905,7 @@ packages:
       '@verdaccio/loaders': 8.0.0-next-8.6
       '@verdaccio/signature': 8.0.0-next-8.7
       '@verdaccio/utils': 8.1.0-next-8.15
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       lodash: 4.17.21
       verdaccio-htpasswd: 13.0.0-next-8.15
     transitivePeerDependencies:
@@ -21810,7 +21924,7 @@ packages:
     dependencies:
       '@verdaccio/core': 8.0.0-next-8.15
       '@verdaccio/utils': 8.1.0-next-8.15
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       js-yaml: 4.1.0
       lodash: 4.17.21
       minimatch: 7.4.6
@@ -21844,7 +21958,7 @@ packages:
     resolution: {integrity: sha512-yuqD8uAZJcgzuNHjV6C438UNT5r2Ai9+SnUlO34AHZdWSYcluO3Zj5R3p5uf+C7YPCE31pUD27wBU74xVbUoBw==}
     engines: {node: '>=18'}
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       lodash: 4.17.21
     transitivePeerDependencies:
       - supports-color
@@ -21871,7 +21985,7 @@ packages:
       '@verdaccio/core': 8.0.0-next-8.15
       '@verdaccio/logger-prettify': 8.0.0-next-8.2
       colorette: 2.0.20
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -21902,7 +22016,7 @@ packages:
       '@verdaccio/core': 8.0.0-next-8.15
       '@verdaccio/url': 13.0.0-next-8.15
       '@verdaccio/utils': 8.1.0-next-8.15
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       express: 4.21.2
       express-rate-limit: 5.5.1
       lodash: 4.17.21
@@ -21920,7 +22034,7 @@ packages:
     engines: {node: '>=18'}
     dependencies:
       '@verdaccio/config': 8.0.0-next-8.15
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       jsonwebtoken: 9.0.2
     transitivePeerDependencies:
       - supports-color
@@ -21936,7 +22050,7 @@ packages:
       '@verdaccio/core': 8.0.0-next-8.15
       '@verdaccio/url': 13.0.0-next-8.15
       '@verdaccio/utils': 8.1.0-next-8.15
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       gunzip-maybe: 1.4.2
       lodash: 4.17.21
       tar-stream: 3.1.7
@@ -21951,7 +22065,7 @@ packages:
     engines: {node: '>=18'}
     dependencies:
       '@verdaccio/core': 8.0.0-next-8.15
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       lodash: 4.17.21
       validator: 13.12.0
     transitivePeerDependencies:
@@ -22353,7 +22467,7 @@ packages:
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
       magic-string: 0.30.17
-      postcss: 8.5.3
+      postcss: 8.5.4
       source-map-js: 1.2.1
     dev: true
 
@@ -22417,6 +22531,25 @@ packages:
       path-browserify: 1.0.1
       typescript: 5.5.2
 
+  /@vue/language-core@2.2.0(typescript@5.5.2):
+    resolution: {integrity: sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 2.4.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.13
+      alien-signals: 0.4.14
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      typescript: 5.5.2
+    dev: true
+
   /@vue/language-core@2.2.10(typescript@5.7.3):
     resolution: {integrity: sha512-+yNoYx6XIKuAO8Mqh1vGytu8jkFEOH5C8iOv3i8Z/65A7x9iAOXA97Q+PqZ3nlm2lxf5rOJuIGI/wDtx/riNYw==}
     peerDependencies:
@@ -23178,7 +23311,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -23186,7 +23319,7 @@ packages:
     resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
     engines: {node: '>= 14'}
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -23327,6 +23460,10 @@ packages:
       uri-js: 4.4.1
     dev: false
 
+  /alien-signals@0.4.14:
+    resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
+    dev: true
+
   /alien-signals@1.0.13:
     resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
 
@@ -25750,6 +25887,10 @@ packages:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
     dev: true
 
+  /confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+    dev: true
+
   /config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
     dependencies:
@@ -27046,7 +27187,6 @@ packages:
     dependencies:
       ms: 2.1.3
       supports-color: 8.1.1
-    dev: true
 
   /debug@4.4.0(supports-color@9.3.1):
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
@@ -27059,6 +27199,7 @@ packages:
     dependencies:
       ms: 2.1.3
       supports-color: 9.3.1
+    dev: true
 
   /decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
@@ -27303,7 +27444,7 @@ packages:
     hasBin: true
     dependencies:
       address: 1.2.2
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -28040,7 +28181,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       esbuild: 0.17.19
     transitivePeerDependencies:
       - supports-color
@@ -28051,7 +28192,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       esbuild: 0.18.20
     transitivePeerDependencies:
       - supports-color
@@ -28062,7 +28203,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       esbuild: 0.23.0
     transitivePeerDependencies:
       - supports-color
@@ -28072,7 +28213,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       esbuild: 0.24.0
     transitivePeerDependencies:
       - supports-color
@@ -28083,7 +28224,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       esbuild: 0.25.0
     transitivePeerDependencies:
       - supports-color
@@ -28471,8 +28612,8 @@ packages:
         optional: true
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.0(supports-color@9.3.1)
-      enhanced-resolve: 5.17.1
+      debug: 4.4.0(supports-color@8.1.1)
+      enhanced-resolve: 5.18.1
       eslint: 9.0.0
       eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.0.0)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.3)(eslint@9.0.0)
@@ -29040,7 +29181,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -29086,7 +29227,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.3.0
       eslint-visitor-keys: 4.2.0
@@ -29507,6 +29648,10 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /exsolve@1.0.5:
+    resolution: {integrity: sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==}
+    dev: true
+
   /ext-list@2.2.2:
     resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==}
     engines: {node: '>=0.10.0'}
@@ -30064,7 +30209,7 @@ packages:
       debug:
         optional: true
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
 
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@@ -30197,15 +30342,6 @@ packages:
       mime-types: 2.1.35
     dev: true
 
-  /form-data@4.0.0:
-    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
-    engines: {node: '>= 6'}
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      mime-types: 2.1.35
-    dev: true
-
   /form-data@4.0.1:
     resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
     engines: {node: '>= 6'}
@@ -31638,7 +31774,7 @@ packages:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -31648,7 +31784,7 @@ packages:
     engines: {node: '>= 14'}
     dependencies:
       agent-base: 7.1.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -31676,7 +31812,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@types/http-proxy': 1.17.15
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       http-proxy: 1.18.1(debug@4.4.0)
       is-glob: 4.0.3
       is-plain-object: 5.0.0
@@ -31747,7 +31883,7 @@ packages:
     engines: {node: '>= 6.0.0'}
     dependencies:
       agent-base: 5.1.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -31757,26 +31893,16 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.4.0(supports-color@9.3.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  /https-proxy-agent@7.0.5:
-    resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
-    engines: {node: '>= 14'}
-    dependencies:
-      agent-base: 7.1.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
     dependencies:
       agent-base: 7.1.3
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -31932,7 +32058,7 @@ packages:
     resolution: {integrity: sha512-YVt14UZCgsX1vZQ3gKjkWVdBdHQ6eu3MPU1TBgL1H5orXe2+jWD006WCPPtOuwlQm10NuzOW5WawiF1Q9veW8g==}
     engines: {node: '>=18.20'}
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       import-meta-resolve: 4.1.0
     transitivePeerDependencies:
       - supports-color
@@ -32781,7 +32907,7 @@ packages:
     resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
     engines: {node: '>=10'}
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -32793,7 +32919,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       istanbul-lib-coverage: 3.2.2
     transitivePeerDependencies:
       - supports-color
@@ -33606,10 +33732,10 @@ packages:
       cssstyle: 4.1.0
       data-urls: 5.0.0
       decimal.js: 10.4.3
-      form-data: 4.0.0
+      form-data: 4.0.2
       html-encoding-sniffer: 4.0.0
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       is-potential-custom-element-name: 1.0.1
       nwsapi: 2.2.13
       parse5: 7.1.2
@@ -33854,7 +33980,7 @@ packages:
       content-disposition: 0.5.4
       content-type: 1.0.5
       cookies: 0.9.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       delegates: 1.0.0
       depd: 2.0.0
       destroy: 1.2.0
@@ -33885,7 +34011,7 @@ packages:
       content-disposition: 0.5.4
       content-type: 1.0.5
       cookies: 0.9.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       delegates: 1.0.0
       depd: 2.0.0
       destroy: 1.2.0
@@ -33916,7 +34042,7 @@ packages:
       content-disposition: 0.5.4
       content-type: 1.0.5
       cookies: 0.9.1
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       delegates: 1.0.0
       depd: 2.0.0
       destroy: 1.2.0
@@ -34261,6 +34387,15 @@ packages:
       pkg-types: 1.2.1
     dev: true
 
+  /local-pkg@1.1.1:
+    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.7.4
+      pkg-types: 2.1.0
+      quansync: 0.2.10
+    dev: true
+
   /locate-path@2.0.0:
     resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
     engines: {node: '>=4'}
@@ -35304,7 +35439,7 @@ packages:
     resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.3
@@ -35609,7 +35744,7 @@ packages:
     dependencies:
       acorn: 8.14.0
       pathe: 1.1.2
-      pkg-types: 1.2.1
+      pkg-types: 1.3.1
       ufo: 1.5.4
     dev: true
 
@@ -35622,6 +35757,15 @@ packages:
       ufo: 1.5.4
     dev: true
 
+  /mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+    dependencies:
+      acorn: 8.14.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.5.4
+    dev: true
+
   /moment@2.30.1:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
     dev: false
@@ -35783,7 +35927,7 @@ packages:
     resolution: {integrity: sha512-0mvZ1o5F0GStEzsZIrlGAYmLOtrILwMCh2vHAT1J2qZdyCqgMUo/5FBVk1B54pmCZCDxOS8mMm3MAIW5nCDL3w==}
     dependencies:
       '@vercel/nft': 0.27.3(encoding@0.1.13)
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       fs-extra: 11.3.0
       mlly: 1.6.1
       pkg-types: 1.2.1
@@ -36588,7 +36732,7 @@ packages:
       consola: 3.2.3
       execa: 8.0.1
       pathe: 1.1.2
-      pkg-types: 1.2.1
+      pkg-types: 1.3.1
       ufo: 1.5.4
     dev: true
 
@@ -37317,6 +37461,10 @@ packages:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
     dev: true
 
+  /pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+    dev: true
+
   /pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
     dev: true
@@ -37491,6 +37639,22 @@ packages:
       pathe: 1.1.2
     dev: true
 
+  /pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.4
+      pathe: 2.0.3
+    dev: true
+
+  /pkg-types@2.1.0:
+    resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.5
+      pathe: 2.0.3
+    dev: true
+
   /pkg-up@3.1.0:
     resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
     engines: {node: '>=8'}
@@ -38468,7 +38632,6 @@ packages:
       nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
-    dev: false
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -38873,7 +39036,7 @@ packages:
     engines: {node: '>=8.16.0'}
     dependencies:
       '@types/mime-types': 2.1.4
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       extract-zip: 1.7.0
       https-proxy-agent: 4.0.0
       mime: 2.6.0
@@ -38904,6 +39067,10 @@ packages:
     dependencies:
       side-channel: 1.1.0
 
+  /quansync@0.2.10:
+    resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
+    dev: true
+
   /querystring-es3@0.2.1:
     resolution: {integrity: sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==}
     engines: {node: '>=0.4.x'}
@@ -42764,7 +42931,7 @@ packages:
       '@semantic-release/release-notes-generator': 14.0.3(semantic-release@24.2.3)
       aggregate-error: 5.0.0
       cosmiconfig: 9.0.0(typescript@5.7.3)
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       env-ci: 11.1.0
       execa: 9.5.2
       figures: 6.1.0
@@ -42875,7 +43042,7 @@ packages:
     resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
     engines: {node: '>= 18'}
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       etag: 1.8.1
@@ -43423,7 +43590,7 @@ packages:
   /spdy-transport@3.0.0:
     resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==}
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       detect-node: 2.1.0
       hpack.js: 2.1.6
       obuf: 1.1.2
@@ -43436,7 +43603,7 @@ packages:
     resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       handle-thing: 2.0.1
       http-deceiver: 1.2.7
       select-hose: 2.0.0
@@ -43736,7 +43903,7 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       date-format: 4.0.14
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       fs-extra: 8.1.0
     transitivePeerDependencies:
       - supports-color
@@ -44219,7 +44386,7 @@ packages:
     hasBin: true
     dependencies:
       '@adobe/css-tools': 4.3.3
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       glob: 10.4.5
       sax: 1.4.1
       source-map: 0.7.4
@@ -44286,6 +44453,7 @@ packages:
   /supports-color@9.3.1:
     resolution: {integrity: sha512-knBY82pjmnIzK3NifMo3RxEIRD9E0kIzV4BKcyTZ9+9kWgLMxd4PrsTSMoFQUabgRBbF8KOLRDCyKgNV+iK44Q==}
     engines: {node: '>=12'}
+    dev: true
 
   /supports-hyperlinks@3.2.0:
     resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
@@ -45425,7 +45593,7 @@ packages:
       webpack: ^5.0.0
     dependencies:
       chalk: 4.1.2
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       micromatch: 4.0.8
       semver: 7.6.3
       typescript: 5.5.2
@@ -45456,7 +45624,7 @@ packages:
       webpack: ^5.0.0
     dependencies:
       chalk: 4.1.2
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       micromatch: 4.0.8
       semver: 7.6.3
       source-map: 0.7.4
@@ -45609,7 +45777,7 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       chalk: 4.1.2
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       tsconfig-paths: 4.2.0
     dev: true
 
@@ -45618,7 +45786,7 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       chalk: 4.1.2
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       tapable: 2.2.1
       tsconfig-paths: 4.2.0
     dev: true
@@ -45678,7 +45846,7 @@ packages:
       bundle-require: 4.2.1(esbuild@0.19.2)
       cac: 6.7.14
       chokidar: 3.6.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       esbuild: 0.19.2
       execa: 5.1.1
       globby: 11.1.0
@@ -45720,7 +45888,7 @@ packages:
       cac: 6.7.14
       chokidar: 4.0.1
       consola: 3.2.3
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       esbuild: 0.24.0
       joycon: 3.1.1
       picocolors: 1.1.1
@@ -45955,6 +46123,12 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  /typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
   /typical@4.0.0:
     resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==}
     engines: {node: '>=8'}
@@ -46590,7 +46764,7 @@ packages:
       apache-md5: 1.1.8
       bcryptjs: 2.4.3
       core-js: 3.40.0
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       http-errors: 2.0.0
       unix-crypt-td-js: 1.1.4
     transitivePeerDependencies:
@@ -46621,7 +46795,7 @@ packages:
       clipanion: 4.0.0-rc.4(typanion@3.14.0)
       compression: 1.8.0
       cors: 2.8.5
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       envinfo: 7.14.0
       express: 4.21.2
       handlebars: 4.7.8
@@ -46707,7 +46881,7 @@ packages:
     hasBin: true
     dependencies:
       cac: 6.7.14
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       pathe: 1.1.2
       picocolors: 1.1.1
       vite: 5.4.18(@types/node@20.12.14)(less@4.3.0)(stylus@0.64.0)
@@ -46729,7 +46903,7 @@ packages:
     hasBin: true
     dependencies:
       cac: 6.7.14
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       pathe: 1.1.2
       picocolors: 1.1.1
       vite: 5.4.18(@types/node@18.16.9)(less@4.3.0)(stylus@0.64.0)
@@ -46799,6 +46973,32 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-dts@4.5.4(@types/node@18.16.9)(rollup@4.40.0)(typescript@5.5.2)(vite@5.4.18):
+    resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
+    peerDependencies:
+      typescript: '*'
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      '@microsoft/api-extractor': 7.52.8(@types/node@18.16.9)
+      '@rollup/pluginutils': 5.1.4(rollup@4.40.0)
+      '@volar/typescript': 2.4.13
+      '@vue/language-core': 2.2.0(typescript@5.5.2)
+      compare-versions: 6.1.1
+      debug: 4.4.0(supports-color@8.1.1)
+      kolorist: 1.8.0
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      typescript: 5.5.2
+      vite: 5.4.18(@types/node@18.16.9)(less@4.3.0)(stylus@0.64.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+    dev: true
+
   /vite-tsconfig-paths@4.2.3(typescript@5.7.3)(vite@6.3.5):
     resolution: {integrity: sha512-xVsA2xe6QSlzBujtWF8q2NYexh7PAUYfzJ4C8Axpe/7d2pcERYxuxGgph9F4f0iQO36g5tyGq6eBUYIssdUrVw==}
     peerDependencies:
@@ -46850,7 +47050,7 @@ packages:
       '@types/node': 16.11.68
       esbuild: 0.21.5
       less: 4.3.0
-      postcss: 8.5.3
+      postcss: 8.5.4
       rollup: 4.40.0
       stylus: 0.64.0
     optionalDependencies:
@@ -46932,7 +47132,7 @@ packages:
       '@types/node': 20.12.14
       esbuild: 0.21.5
       less: 4.3.0
-      postcss: 8.5.3
+      postcss: 8.5.4
       rollup: 4.40.0
       stylus: 0.64.0
     optionalDependencies:
@@ -47148,7 +47348,7 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      debug: 4.4.0(supports-color@9.3.1)
+      debug: 4.4.0(supports-color@8.1.1)
       eslint: 8.57.1
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -48010,7 +48210,7 @@ packages:
       acorn: 8.14.0
       browserslist: 4.24.4
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       es-module-lexer: 1.6.0
       eslint-scope: 5.1.1
       events: 3.3.0
@@ -48051,7 +48251,7 @@ packages:
       acorn: 8.14.0
       browserslist: 4.24.4
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       es-module-lexer: 1.6.0
       eslint-scope: 5.1.1
       events: 3.3.0
@@ -48092,7 +48292,7 @@ packages:
       acorn: 8.14.0
       browserslist: 4.24.4
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       es-module-lexer: 1.6.0
       eslint-scope: 5.1.1
       events: 3.3.0