@module-federation/nextjs-mf - how to expose and import server side components?

[j999perper]

Hello, Module Federation Team!

I created a "server side component" in remote application.
pages/ssr.tsx

export async function getStaticProps() {
  const data = await fetch(`${API_URL}`).then(res => res.json());
  return {
    props: { data }
  };
}

export default function SSR({ data }: any) {
  console.log('@props', data);
  return <div>{JSON.stringify(data) || 'Empty'}</div>;
}

In next.config.js config file,

const NextFederationPlugin = require('@module-federation/nextjs-mf');

const federationConfig = {
  name: 'app1',
  filename: 'static/chunks/remoteEntry.js',
  exposes: {
   './SSR': './src/pages/SSR'
  }
};

module.exports = {
  webpack: (config, options ) => {
    config.plugins.push(new NextFederationPlugin(federationConfig));
    return config;
  }
};

In my consuming app,

next.config.js

const NextFederationPlugin = require('@module-federation/nextjs-mf');

const getFederationConfig = isServer => ({
  name: 'app2',
  remotes: {
    app1: `app1@http://localhost:8000/_next/static/${
      isServer ? 'ssr' : 'chunks'
    }/remoteEntry.js`
  },
  filename: 'static/chunks/remoteEntry.js'
});

module.exports = {
  webpack: (config, options) => {
    config.plugins.push(
      new NextFederationPlugin(getFederationConfig(options.isServer))
    );
    return config;
  }
};

And I imported that module in my consuming app.

const SSR = dynamic(() => import('app1/SSR'));

Then I rendered this component on my consuming app, but it never displays data, instead it displays Empty.

Thank you

[j999perper]

Hi @ilteoood , can you suggest some ideas?

[j999perper]

Hi @pavandv , can you please suggest an idea?
Thanks