Server-Side Rendering

Server-Side Rendering is an important part of building production-ready Module Federation systems. This lesson explains what server-side rendering means, how it works, and how to apply it with practical examples you can reuse.

Server-Side Rendering Overview

Server-Side Rendering lets you structure Module Federation work so it stays readable, testable, and easy to scale. Instead of ad-hoc code, you follow a clear pattern that other developers can recognise immediately.

The key is to keep server-side rendering focused and predictable. Start from the minimal example here, then layer in only the complexity your feature actually needs.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: { catalog: 'catalog@http://localhost:3001/remoteEntry.js' },
      exposes: {},
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

ModuleFederationPlugin configures which modules an app exposes, consumes, and shares.

Server-Side Rendering Example

new ModuleFederationPlugin({
  name: 'app',
  filename: 'remoteEntry.js',
  exposes: { './Widget': './src/Widget' },
  remotes: { other: 'other@http://host/remoteEntry.js' },
  shared: { react: { singleton: true } },
});

Start from a minimal Server-Side Rendering example and grow it only as needed.
Keep configuration explicit so Server-Side Rendering behaves the same in every environment.
Name things clearly so teammates understand your Server-Side Rendering at a glance.
Add tests around Server-Side Rendering early to lock in expected behaviour.

Module Federation Cheatsheet

Key Module Federation settings related to server-side rendering.

Option	Example	Purpose
name	`name: 'shell'`	Unique container name
filename	`filename: 'remoteEntry.js'`	Remote entry manifest
exposes	`exposes: { './X': './src/X' }`	Modules a remote shares
remotes	`remotes: { app: 'app@url' }`	Remotes a host consumes
shared	`shared: { react: { singleton: true } }`	Deduplicate libraries
lazy load	`import('remote/Module')`	Load remotes on demand
Suspense	`<Suspense fallback={...}>`	Handle async loading

How Server-Side Rendering Works in Module Federation

Server-Side Rendering builds on Module Federation's ability to load code from another independently built and deployed application at runtime. Each app can be a host, a remote, or both.

ModuleFederationPlugin configures which modules an app exposes, consumes, and shares.

Remotes expose modules through a remoteEntry.js manifest.
Hosts declare remotes and import exposed modules dynamically.
Shared dependencies are deduplicated, ideally as singletons.
Each micro frontend builds and deploys on its own schedule.

Practical Guidance for Server-Side Rendering

In production, server-side rendering needs careful version management and graceful failure handling. Align shared dependency versions and always render a fallback when a remote cannot load.

Concern	Recommendation
Shared versions	Use singletons with requiredVersion
Runtime errors	Wrap remotes in error boundaries and fallbacks
Deployment	Resolve remotes from a runtime manifest
Performance	Lazy-load remotes and cache remoteEntry.js

Common Mistakes

Copying server-side rendering snippets without understanding what each line does.
Skipping error handling and edge cases when wiring up server-side rendering.
Leaving server-side rendering untested, so regressions slip into production.
Over-engineering server-side rendering before you actually need the extra flexibility.

Key Takeaways

Server-Side Rendering is a core part of working effectively with Module Federation.
Start small and keep server-side rendering focused on a single responsibility.
Apply consistent patterns so server-side rendering scales across your project.
Test and document server-side rendering to keep it maintainable over time.

Pro Tip

When you get stuck on server-side rendering, reduce it to the smallest reproducible example first — most Module Federation issues become obvious once the noise is gone.