Server-Side Rendering
@module-federation/modern-js offers powerful capabilities, enabling developers to easily combine Module Federation with server-side rendering (SSR) in Modern.js applications.
Enable SSR
Using the application created in Using Module Federation as an example, you only need to add the server.ssr configuration to both the producer and the consumer:
import { appTools, defineConfig } from '@modern-js/app-tools';
export default defineConfig({
server: {
ssr: {
mode: 'stream',
},
},
});For better performance, we only support using this capability combination in Streaming SSR scenarios.
Application-level modules (modules using createBridgeComponent and createRemoteAppComponent) do not support server-side rendering (SSR). If you need to use SSR functionality, please use component-level module export methods instead.
Data Fetching
Currently, this feature is experimental and has not been fully practiced. Please use it with caution.
Module Federation now supports data fetching capabilities. Each producer file can have a corresponding data fetching file, with the file name format of [name].data.ts.
In Modern.js, data fetching can be used with SSR. Using the example in the previous chapter, create a data fetching file:
import type { DataFetchParams } from '@module-federation/modern-js/react';
export type Data = {
data: string;
};
export const fetchData = async (params: DataFetchParams): Promise<Data> => {
return new Promise(resolve => {
setTimeout(() => {
resolve({
data: `data: ${new Date()}`,
});
}, 1000);
});
};In Button, we get the data from the Props:
import React from 'react';
import type { Data } from './Button.data';
export const Button = (props: { mfData: Data }) => {
const { mfData } = props;
return (
<button type="button" className="test">
Remote Button {mfData?.data}
</button>
);
};Consuming Components
Consumers must use createLazyComponent to load remote components and specify the export as the component name.
import type { JSX } from 'react';
import { getInstance } from '@module-federation/modern-js/runtime';
import {
ERROR_TYPE,
lazyLoadComponentPlugin,
} from '@module-federation/modern-js/react';
const instance = getInstance();
instance!.registerPlugins([lazyLoadComponentPlugin()]);
const Button = instance!.createLazyComponent({
loader: () => {
return import('remote/Button');
},
loading: 'loading...',
export: 'Button', // Configure this as the export name of the remote component
fallback: ({ error, errorType, dataFetchMapKey }) => {
console.error(error);
if (errorType === ERROR_TYPE.LOAD_REMOTE) {
return <div>load remote failed</div>;
}
if (errorType === ERROR_TYPE.DATA_FETCH) {
return (
<div>
data fetch failed, the dataFetchMapKey key is: {dataFetchMapKey}
</div>
);
}
return <div>error type is unknown</div>;
},
});
const Index = (): JSX.Element => {
return (
<div>
<h1>Basic usage with data fetch</h1>
<Button />
</div>
);
};
export default Index;