feat: delegate modules for next.js (#2756)

Author: ScriptedAlchemy

README.md

@@ -15,9 +15,9 @@ This repository is to showcase examples of how Webpack 5's new Module Federation
 
 
 https://module-federation.github.io/
- 
+
 https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ
- 
+
 https://scriptedalchemy.medium.com/
 
 # Examples
@@ -56,8 +56,9 @@ https://scriptedalchemy.medium.com/
 - [x] [NextJS Sidecar Build](./nextjs-sidecar/README.md) — Sidecar build to enable module-federation alongside Next codebases.
 - [x] [NextJS v12](./nextjs-v12/README.md) — Operation, with [nextjs-mf](https://www.npmjs.com/package/@module-federation/nextjs-mf).
 - [x] [NextJS v13](./nextjs-v13/README.md) — Operation, with [nextjs-mf](https://www.npmjs.com/package/@module-federation/nextjs-mf).
-- [x] [NextJS](./nextjs/README.md) — Operation, with [nextjs-mf](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf).
-- [x] 💰[NextJS SSR](./nextjs-ssr/README.md) — Powered by software streams, with [nextjs-ssr](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-ssr)
+- [x] [NextJS](./nextjs/README.md) — Operation, with [nextjs-mf](https://github.com/module-federation/universe).
+- [x] [NextJS SSR](./nextjs-ssr/README.md) — Powered by software streams, with [nextjs-ssr](https://github.com/module-federation/universe)
+- [x] [NextJS SSR via Delegates](./nextjs-ssr-delegate-modules/README.md) — Custom glue code for containers and hosts [nextjs-ssr](https://github.com/module-federation/universe)
 - [x] [Building A Plugin-based Workflow Designer With Angular and Module Federation](https://github.com/manfredsteyer/module-federation-with-angular-dynamic-workflow-designer) — External Example
 - [x] [Vue.js](./vue3-demo/README.md) — Simple host/remote (render function / sfc) example using Vue 3.0.
 - [x] [Vue 2 in Vue 3](./vue2-in-vue3/README.md) — Vue 3 application loading remote Vue 2 component.
@@ -68,7 +69,7 @@ https://scriptedalchemy.medium.com/
 - [x] [vue3-demo-federation-with-vite](./vue3-demo-federation-with-vite/README.md) — wepack and vite federation integrated projects, webpack/vite both play the role of host and remote
 - [x] [quasar-cli-vue3-webpack-javascript](./quasar-cli-vue3-webpack-javascript/README.md) — Module federation integration with Quasar apps running vue3 using quasar-cli (javascript)
 - [x] [UMD Federation](./umd-federation) — Support importing umd remote module
- 
+
 **Module Federation Examples** covered by e2e tests with **Cypress** framework, more info about structure and configuration 👉 [here](./cypress/README.md) 👈
 
 # Check out our book

delegate-modules/app1/remote-delegate.js

@@ -11,7 +11,8 @@ module.exports = new Promise((resolve, reject) => {
       __webpack_error__.name = 'ScriptExternalLoadError';
       __webpack_error__.stack = event.stack;
       reject(__webpack_error__);
-    }, global
+    },
+    global,
   );
 })
 

nextjs-ssr-delegate-modules/README.md

@@ -0,0 +1,44 @@
+# Getting Started
+To start, run yarn start and navigate to http://localhost:3001 or another available port.
+
+# Consulting Services Available
+For consultations, contact Zackary Jackson at zackary.l.jackson@gmail.com or via Twitter at @ScriptedAlchemy.
+
+# How it Works
+This implementation uses our proprietary Software Streams technology to stream commonjs modules at runtime to consuming apps. This technology has not been made publicly available, and we have kept it a guarded secret for the past 2 years despite using it for multiple backend systems.
+
+For the client side, we have enhanced federation interfaces to ensure that the top-level API works as expected, allowing for import(), require, and import from to function. While the serverside has been tested, only import() has been tested on the client side.
+
+An alpha version of Software Streams was leaked a year and a half ago, but it contains security flaws. The federation group has since spent a significant amount of time enhancing the technology. In the future, after the plugin exits beta, we plan to implement stream encryption to prevent code manipulation. This will be achieved through a cypher key known to both the consumer and remote at build time.
+
+We are also exploring the possibility of executing streamed software in a WASM isolate that has limited access to host resources, making it possible to execute untrusted code.
+
+For now, we strongly advise federating only trusted software between servers.
+
+## Security
+To ensure proper functionality, the commonjs modules are exposed via _next/static/ssr*. For security reasons, it is recommended to have a CDN or middleware in place that only allows access to this path from an internal network or VPN. Exposing server code publicly through this path can pose a security risk as process.browser is not applied to tree shake server secrets.
+
+## Context
+
+We have three Next.js applications:
+
+- `checkout` on port 3000
+- `home` on port 3001
+- `shop` on port 3002
+
+These applications use omnidirectional routing, enabling pages and components to be federated between them like in a SPA.
+
+The use of hooks ensures that multiple copies of React are not loaded into the server or client. The omnidirectional routing also hooks into webpack federation loading functions, allowing dynamic loading of remotes using the same functions as those used for static imports (e.g. home/title).
+
+### Sharing
+
+Next.js has pre-shared internal modules through `@module-federation/nextjs-mf`. However, you need to share React through the plugin to ensure that the shared scope runtime requirements are included. Modules that are shared extra must be processed by the plugin, which reconfigures sharing to work within the limitations of Next.js.
+
+The sharing limit is due to Next.js having no async boundary, making it impossible to "pause" the application while webpack manages the shared scope. The author is exploring new methods that could potentially solve the module sharing issue in Next.js, but this is a complex challenge requiring extensive knowledge of webpack and federation within the module graph.
+
+# Delegate Modules
+
+Delegate modules in module federation offer a flexible solution for creating custom connection code between federated modules.
+Compared to using the promise `new Promise syntax`, delegate modules are bundled into webpack and can utilize `require` and `import` statements.
+This makes them ideal for handling complex requirements such as loading remote modules or customizing the federation API.
+However, it's important to note that delegate modules are an advanced feature and may not be necessary for the majority of users.

nextjs-ssr-delegate-modules/checkout/components/exposedTitle.js

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react';
+const ExportredTitle = () => {
+  console.log('---------loading remote component from checkout---------');
+  useEffect(() => {
+    console.log('HOOKS WORKS');
+  }, []);
+  return (
+    <div className="hero">
+      <h1 className="title">
+        {' '}
+        This came fom <code>checkout</code> !!!
+      </h1>
+      <p className="description">And it works like a charm v2</p>
+    </div>
+  );
+};
+
+export default ExportredTitle;

nextjs-ssr-delegate-modules/checkout/next.config.js

@@ -0,0 +1,43 @@
+const NextFederationPlugin = require('@module-federation/nextjs-mf');
+const {createDelegatedModule} = require('@module-federation/utilities');
+
+const remotes = isServer => {
+  const location = isServer ? 'ssr' : 'chunks';
+  return {
+    home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
+      remote: `home@http://localhost:3001/_next/static/${location}/remoteEntry.js`
+    }),
+    shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
+      remote: `shop@http://localhost:3002/_next/static/${location}/remoteEntry.js`
+    }),
+    checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
+      remote: `checkout@http://localhost:3000/_next/static/${location}/remoteEntry.js`
+    }),
+    // home: `home@http://localhost:3001/_next/static/${location}/remoteEntry.js`,
+    // shop: `shop@http://localhost:3002/_next/static/${location}/remoteEntry.js`,
+    // checkout: `checkout@http://localhost:3000/_next/static/${location}/remoteEntry.js`,
+  };
+};
+
+module.exports = {
+  webpack(config, options) {
+
+    config.plugins.push(
+      new NextFederationPlugin({
+        name: 'checkout',
+        filename: 'static/chunks/remoteEntry.js',
+        exposes: {
+          './title': './components/exposedTitle.js',
+          './checkout': './pages/checkout.js',
+          './pages-map': './pages-map.js',
+        },
+        remotes: remotes(options.isServer),
+        extraOptions:{
+          automaticAsyncBoundary: true
+        }
+      }),
+    );
+
+    return config;
+  },
+};

nextjs-ssr-delegate-modules/checkout/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "delegate-checkout",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "rm -rf .next && next dev",
+    "build": "next build",
+    "start": "NODE_ENV=production next start"
+  },
+  "dependencies": {
+    "@module-federation/nextjs-mf": "6.1.1",
+    "@module-federation/utilities": "1.3.0",
+    "lodash": "4.17.21",
+    "next": "13.1.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "5.72.1"
+  }
+}

nextjs-ssr-delegate-modules/checkout/pages-map.js

@@ -0,0 +1,3 @@
+export default {
+  '/checkout': './checkout',
+};

nextjs-ssr-delegate-modules/checkout/pages/_app.js

@@ -0,0 +1,23 @@
+import {Suspense,lazy} from "react";
+import App from 'next/app';
+import dynamic from 'next/dynamic';
+const Nav = dynamic(() => {
+  return import('home/nav');
+},{suspense:true});
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Suspense fallback={'loading'}>
+      <Nav />
+      </Suspense>
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+MyApp.getInitialProps = async ctx => {
+  const appProps = await App.getInitialProps(ctx);
+  return appProps;
+};
+export default MyApp;

nextjs-ssr-delegate-modules/checkout/pages/_document.js

@@ -0,0 +1,48 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import React from "react";
+import { revalidate, FlushedChunks, flushChunks } from "@module-federation/nextjs-mf/utils";
+
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    if(process.env.NODE_ENV === "development" && !ctx.req.url.includes("_next")) {
+      await revalidate().then((shouldReload) =>{
+        if (shouldReload) {
+          ctx.res.writeHead(302, { Location: ctx.req.url });
+          ctx.res.end();
+        }
+      });
+    } else {
+      ctx?.res?.on("finish", () => {
+        revalidate()
+      });
+    }
+
+    const chunks = await flushChunks()
+
+    const initialProps = await Document.getInitialProps(ctx);
+    return {
+      ...initialProps,
+      chunks
+    };
+  }
+
+  render() {
+
+    return (
+      <Html>
+        <Head>
+          <meta name="robots" content="noindex" />
+          <FlushedChunks chunks={this.props.chunks} />
+        </Head>
+
+        <body className="bg-background-grey">
+        <Main />
+        <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

nextjs-ssr-delegate-modules/checkout/pages/checkout.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import Head from 'next/head';
+
+const Checkout = props => (
+  <div>
+    <Head>
+      <title>checkout</title>
+      <link rel="icon" href="/nextjs-ssr/checkout/public/favicon.ico" />
+    </Head>
+
+    <div className="hero">
+      <h1>checkout page</h1>
+      <h3 className="title">This is a federated page owned by localhost:3000</h3>
+      <span>
+        {' '}
+        Data from federated <pre>getInitalProps</pre>
+      </span>
+      <br />
+      <pre>{JSON.stringify(props, null, 2)}</pre>
+    </div>
+    <style jsx>{`
+      .hero {
+        width: 100%;
+        color: #333;
+      }
+      .title {
+        margin: 0;
+        width: 100%;
+        padding-top: 80px;
+        line-height: 1.15;
+        font-size: 20px;
+      }
+      .title,
+      .description {
+        text-align: center;
+      }
+    `}</style>
+  </div>
+);
+Checkout.getInitialProps = async () => {
+  const swapi = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
+  console.log(swapi);
+  console.log('swapi');
+  return swapi;
+};
+export default Checkout;