简体中文

服务端渲染

@module-federation/modern-js 提供了非常强大的能力，开发者可以非常方便的在 Modern.js 应用中，组合使用 Module Federation 和服务端渲染（SSR）的能力。

开启 SSR

我们以使用模块联邦创建的应用为例，只需要在生产者和消费者上，都添加 server.ssr 配置即可：

modern.config.ts

import { appTools, defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  server: {
    ssr: {
      mode: 'stream',
      // 禁用预渲染，优化 SSR 性能
      disablePrerender: true,
    },
  },
})

为更好的性能体验，我们仅支持 Streaming SSR 情况使用这种能力组合。

WARNING

目前 @module-federation/bridge-react 未兼容 Node 环境，你必须从依赖中移除它，才能正常使用 Module Federation 和服务端渲染。这意味着 Bridge 无法和服务端渲染配合使用。

数据获取

TIP

目前该功能为实验性功能，功能还未经过充分实践，请谨慎使用。

Module Federation 在新版本中支持了数据获取的能力。每个生产者文件都可以有一个对应的数据获取文件，文件名格式为 [name].data.ts。

在 Modern.js 中，数据获取可以配合 SSR 使用。我们以前面章节的 Demo 为例子，创建一个数据获取文件：

src/components/Button.data.ts

import type { DataFetchParams } from '@module-federation/modern-js/react';

export type Data = {
  data: string;
};

export const fetchData = async (params: DataFetchParams): Promise<Data> => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        data: `data: ${new Date()}`,
      });
    }, 1000);
  });
};

在 Button 中，我们从 Props 中获取到数据：

src/components/Button.tsx

import React from 'react';
import './index.css';
import type { Data } from './Button.data';

export const Button = (props: { mfData: Data }) => {
  const { mfData } = props;
  return (
    <button type="button" className="test">
      Remote Button {mfData?.data}
    </button>
  );
};

#服务端渲染

#开启 SSR

#数据获取

服务端渲染

开启 SSR

数据获取