Skip to content

Commit 7f7ec0c

Browse files
2heal12heal1
committed
fix: support ssr cache
1 parent 2096b66 commit 7f7ec0c

File tree

8 files changed

+70
-28
lines changed

8 files changed

+70
-28
lines changed

‎apps/modern-component-data-fetch/host/src/routes/layout.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
import React from 'react';
22
import { Outlet, useNavigate, useLocation } from '@modern-js/runtime/router';
33
import { Layout, Menu } from 'antd';
4+
import { getInstance } from '@module-federation/modern-js/runtime';
5+
import { prefetch } from '@module-federation/modern-js/react';
6+
7+
console.log('layout');
8+
prefetch({
9+
id: 'remote/BasicComponent',
10+
instance: getInstance(),
11+
});
12+
13+
prefetch({
14+
id: 'provider-csr',
15+
instance: getInstance(),
16+
});
417

518
const { Header, Content } = Layout;
619

‎apps/modern-component-data-fetch/provider-csr/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"build:watch": "rslib build --watch"
99
},
1010
"devDependencies": {
11+
"@module-federation/bridge-react": "workspace:*",
1112
"@module-federation/enhanced": "workspace:*",
1213
"@module-federation/rsbuild-plugin": "workspace:*",
1314
"@module-federation/storybook-addon": "workspace:*",

‎apps/modern-component-data-fetch/provider-csr/src/index.data.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
import { cache } from '@module-federation/bridge-react';
12
export type Data = {
23
data: string;
34
};
45

5-
export const fetchData = async (): Promise<Data> => {
6+
export const fetchData = cache(async (): Promise<Data> => {
7+
console.log(`[ csr provider - server ] fetch data: ${new Date()}`);
68
return new Promise((resolve) => {
79
setTimeout(() => {
810
resolve({
911
data: `[ csr provider - server ] fetched data: ${new Date()}`,
1012
});
1113
}, 1000);
1214
});
13-
};
15+
});

‎apps/modern-component-data-fetch/provider/src/components/BasicComponent/index.data.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export type Data = {
55
};
66

77
export const fetchData = cache(async (): Promise<Data> => {
8+
console.log('provder-server called');
89
return new Promise((resolve) => {
910
setTimeout(() => {
1011
resolve({

‎packages/bridge/bridge-react/src/lazy/data-fetch/data-fetch-server-middleware.ts

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ const getDecodeQuery = (url: URL, name: string) => {
5353

5454
const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
5555
let url: URL;
56-
let dataFetchId: string | null;
56+
let dataFetchKey: string | null;
5757
let params: Record<string, unknown>;
5858
let remoteInfo: NoSSRRemoteInfo;
5959
try {
6060
url = new URL(ctx.req.url);
61-
dataFetchId = getDecodeQuery(url, DATA_FETCH_QUERY);
61+
dataFetchKey = getDecodeQuery(url, DATA_FETCH_QUERY);
6262
params = JSON.parse(getDecodeQuery(url, 'params') || '{}');
6363
const remoteInfoQuery = getDecodeQuery(url, 'remoteInfo');
6464
remoteInfo = remoteInfoQuery ? JSON.parse(remoteInfoQuery) : null;
@@ -67,10 +67,10 @@ const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
6767
return next();
6868
}
6969

70-
if (!dataFetchId) {
70+
if (!dataFetchKey) {
7171
return next();
7272
}
73-
logger.log('fetch data from server, dataFetchId: ', dataFetchId);
73+
logger.log('fetch data from server, dataFetchKey: ', dataFetchKey);
7474
logger.debug(
7575
'fetch data from server, moduleInfo: ',
7676
globalThis.__FEDERATION__?.moduleInfo,
@@ -80,25 +80,25 @@ const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
8080
if (!dataFetchMap) {
8181
initDataFetchMap();
8282
}
83-
const fetchDataPromise = dataFetchMap[dataFetchId]?.[1];
83+
const fetchDataPromise = dataFetchMap[dataFetchKey]?.[1];
8484
logger.debug(
8585
'fetch data from server, fetchDataPromise: ',
8686
fetchDataPromise,
8787
);
8888
if (
8989
fetchDataPromise &&
90-
dataFetchMap[dataFetchId]?.[2] !== MF_DATA_FETCH_STATUS.ERROR
90+
dataFetchMap[dataFetchKey]?.[2] !== MF_DATA_FETCH_STATUS.ERROR
9191
) {
9292
const targetPromise = fetchDataPromise[0];
9393
// Ensure targetPromise is thenable
94-
const wrappedPromise = wrapSetTimeout(targetPromise, 20000, dataFetchId);
94+
const wrappedPromise = wrapSetTimeout(targetPromise, 20000, dataFetchKey);
9595
if (wrappedPromise) {
9696
const res = await wrappedPromise;
9797
logger.log('fetch data from server, fetchDataPromise res: ', res);
9898
return ctx.json(res);
9999
}
100100
logger.error(
101-
`Expected a Promise from fetchDataPromise[0] for dataFetchId ${dataFetchId}, but received:`,
101+
`Expected a Promise from fetchDataPromise[0] for dataFetchKey ${dataFetchKey}, but received:`,
102102
targetPromise,
103103
'Will try call new dataFetch again...',
104104
);
@@ -153,18 +153,18 @@ const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
153153
}
154154
}
155155

156-
const dataFetchItem = dataFetchMap[dataFetchId];
156+
const dataFetchItem = dataFetchMap[dataFetchKey];
157157
logger.debug('fetch data from server, dataFetchItem: ', dataFetchItem);
158158
if (dataFetchItem) {
159-
const callFetchDataPromise = fetchData(dataFetchId, {
159+
const callFetchDataPromise = fetchData(dataFetchKey, {
160160
...params,
161161
isDowngrade: !remoteInfo,
162-
_id: dataFetchId,
162+
_id: dataFetchKey,
163163
});
164164
const wrappedPromise = wrapSetTimeout(
165165
callFetchDataPromise,
166166
20000,
167-
dataFetchId,
167+
dataFetchKey,
168168
);
169169
if (wrappedPromise) {
170170
const res = await wrappedPromise;
@@ -173,7 +173,7 @@ const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
173173
}
174174
}
175175

176-
const remoteId = dataFetchId.split(SEPARATOR)[0];
176+
const remoteId = dataFetchKey.split(SEPARATOR)[0];
177177
const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
178178
if (!hostInstance) {
179179
throw new Error('host instance not found!');
@@ -182,7 +182,7 @@ const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
182182
const data = await dataFetchFn({
183183
...params,
184184
isDowngrade: !remoteInfo,
185-
_id: dataFetchId,
185+
_id: dataFetchKey,
186186
});
187187
logger.log('fetch data from server, loadDataFetchModule res: ', data);
188188
return ctx.json(data);

‎packages/bridge/bridge-react/src/lazy/data-fetch/prefetch.ts

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import {
33
getDataFetchInfo,
44
getDataFetchMap,
55
getDataFetchMapKey,
6+
isServerEnv,
67
} from '../utils';
78
import helpers from '@module-federation/runtime/helpers';
89
import { DataFetchParams } from '../types';
10+
import { MF_DATA_FETCH_TYPE } from '../constant';
911

1012
type PrefetchOptions = {
1113
id: string;
@@ -33,6 +35,8 @@ export async function prefetch(options: PrefetchOptions) {
3335
const { remoteSnapshot, globalSnapshot } =
3436
await instance.snapshotHandler.loadRemoteSnapshotInfo({
3537
moduleInfo: remote,
38+
id,
39+
expose,
3640
});
3741

3842
if (preloadComponentResource) {
@@ -79,19 +83,25 @@ export async function prefetch(options: PrefetchOptions) {
7983
return;
8084
}
8185

82-
const [getDataFetchGetter, _type, getDataFetchPromise] = dataFetchItem[0];
86+
const [getDataFetchGetter, type, getDataFetchPromise] = dataFetchItem[0];
8387

88+
if (type === MF_DATA_FETCH_TYPE.FETCH_CLIENT && !isServerEnv()) {
89+
return;
90+
}
91+
92+
let _getDataFetchPromise = getDataFetchPromise;
8493
if (!getDataFetchPromise) {
8594
if (!getDataFetchGetter) {
8695
return;
8796
}
88-
const _getDataFetchPromise = getDataFetchGetter();
97+
_getDataFetchPromise = getDataFetchGetter();
98+
}
8999

90-
_getDataFetchPromise.then((dataFetchFn) => {
91-
return dataFetchFn({
92-
...dataFetchParams,
93-
isDowngrade: false,
94-
});
100+
_getDataFetchPromise!.then((dataFetchFn) => {
101+
return dataFetchFn({
102+
...dataFetchParams,
103+
_id: dataFetchMapKey,
104+
isDowngrade: false,
95105
});
96-
}
106+
});
97107
}

‎packages/bridge/bridge-react/src/lazy/utils.ts

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { isBrowserEnv, composeKeyWithSeparator } from '@module-federation/sdk';
1+
import {
2+
isBrowserEnv,
3+
composeKeyWithSeparator,
4+
SEPARATOR,
5+
} from '@module-federation/sdk';
26
import logger from './logger';
37
import {
48
DOWNGRADE_KEY,
@@ -45,17 +49,20 @@ export const getDataFetchInfo = ({
4549
const expose = id.replace(nameOrAlias, '');
4650
let dataFetchName = '';
4751
let dataFetchId = '';
52+
let dataFetchKey = '';
4853
if (expose.startsWith('/')) {
4954
dataFetchName = `${expose.slice(1)}.${DATA_FETCH_IDENTIFIER}`;
5055
dataFetchId = `${id}.${DATA_FETCH_IDENTIFIER}`;
56+
dataFetchKey = `${name}${expose}.${DATA_FETCH_IDENTIFIER}`;
5157
} else if (expose === '') {
5258
dataFetchName = DATA_FETCH_IDENTIFIER;
5359
dataFetchId = `${id}/${DATA_FETCH_IDENTIFIER}`;
60+
dataFetchKey = `${name}/${DATA_FETCH_IDENTIFIER}`;
5461
} else {
5562
return;
5663
}
5764

58-
if (!dataFetchName || !dataFetchId) {
65+
if (!dataFetchName || !dataFetchId || !dataFetchKey) {
5966
return;
6067
}
6168

@@ -70,6 +77,7 @@ export const getDataFetchInfo = ({
7077
return {
7178
dataFetchName,
7279
dataFetchId,
80+
dataFetchKey,
7381
};
7482
};
7583

@@ -197,9 +205,9 @@ export function getDataFetchMapKey(
197205
return;
198206
}
199207

200-
const { dataFetchId } = dataFetchInfo;
208+
const { dataFetchKey } = dataFetchInfo;
201209

202-
return composeKeyWithSeparator(dataFetchId, hostInfo.name, hostInfo.version);
210+
return composeKeyWithSeparator(dataFetchKey, hostInfo.name, hostInfo.version);
203211
}
204212

205213
export async function loadDataFetchModule(
@@ -329,6 +337,10 @@ export function isCSROnly() {
329337
return window._SSR_DATA === undefined;
330338
}
331339

340+
export function isServerEnv() {
341+
return typeof window === 'undefined';
342+
}
343+
332344
export function setSSREnv({
333345
fetchServerQuery,
334346
}: {

‎pnpm-lock.yaml

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)