diff --git a/nextjs-ssr-manifest/README.md b/nextjs-ssr-manifest/README.md new file mode 100644 index 00000000000..209369047b9 --- /dev/null +++ b/nextjs-ssr-manifest/README.md @@ -0,0 +1,61 @@ +# Next.js with Module Federation + +## Getting Started + +2. run `pnpm run start` and browse to `http://localhost:3001` or one of the others + +# We are available to consult + +Contact me zackary.l.jackson@gmail.com or @ScriptedAlchemy on Twitter + +## How it works?! + +This implementaion leverages our propriatery _Software Streams_ which allow me to stream commonjs modules at runtime to consuming apps. +We have never made software streaming avaliable to the general public, while we have used it for 2 years and run several backends off the technology - its remained a heavily guarded secret. Software Streams is how SSR works, on the client side we are using enhanced federation interfaces to ensure that the top-level api works as expected. + +It should allow `import()`, `require`, `import from` to work - this has been tested serverside but i have not yet tested anything else other than import() on the client. + +There has been a leaked copy of an alpha from a year and a half ago for software streams. While it does work, there are several security flaws. The federation group has spend signigicant amounts of time enhancing streaming. + +In the future, when this plugin is out of beta - we are planning to build in stream encryption to ensure that code streamed has not been manipulated in any way. +This would rely on a salted cypher key that consumer and remote would know at build time. + +We are also looking into running streamed software in a WASM isolate that cannot perform any damage, has no access to host resources. This would make it possible to execute untrusted code. + +For the time being - I strongly suggest only federating trusted software between servers. + +## Security + +In order to make this plugin work right out the box, the commonjs modules are exposed via `_next/static/ssr*` i strongly suggest having a CDN or piece of middleware that only allows access to this path from internal network or VPN. You do not want the public internet to be able to reach that path. You are exposing server code, where `process.browser` is not applied to tree shake server secrets since this is server code. + +## Context + +We have three next.js applications + +- `checkout` - port 3000 +- `home` - port 3001 +- `shop` - port 3002 + +The applications utilize omnidirectional routing and pages or components are able to be federated between applications like a SPA + +I am using hooks here to ensure multiple copies of react are not loaded into scope on server or client. + +The omnidirectional routing now hooks into webpack federation loading functions, so when dynamically loading remotes - you can use the same functions that webpack uses to load remotes when theres a know static import like `home/title` + +I am using hooks here to ensure multiple copies of react are not loaded into scope on server or client. + +### Sharing + +Next.js has all its internal modules pre-shared vis `@module-federation/nextjs-mf` you do need to share react via the plugin in order to ensure that the share scope runtime requirements are included - since you cannot share modules in a normal manner, like nextjs internls, the pre-shared modules are attached at runtime to the share scope. Any exta code you share is processed via the plugin which reconfigures sharing properly to work with next.js limitations. + +The sharing limit is due to next not having any async boundary, theres no way to "pause" the application while webpack orchestrates share scope. + +I am investigating new methods that may solve the module sharing problem in next.js, however this is a complex problem to solve and requires enormus amounts of knowladge around how webpack and federation work inside the module graph. + +# Running Playwright E2E Tests + +To run tests locally, run `pnpm test:e2e` from this example directory. + +To build the apps and run tests in headless mode, run `pnpm e2e:ci`. + +["Best Practices, Rules amd more interesting information here](../playwright-e2e/README.md) diff --git a/nextjs-ssr-manifest/checkout/components/exposedTitle.js b/nextjs-ssr-manifest/checkout/components/exposedTitle.js new file mode 100644 index 00000000000..6a25851bccd --- /dev/null +++ b/nextjs-ssr-manifest/checkout/components/exposedTitle.js @@ -0,0 +1,19 @@ +import React, { useEffect } from 'react'; +import styles from './sample.module.css'; +const ExportredTitle = () => { + console.log('---------loading remote component---------'); + useEffect(() => { + console.log('HOOKS WORKS'); + }, []); + return ( +
+

+ {' '} + This came fom checkout !!! +

+

And it works like a charm v2

+
+ ); +}; + +export default ExportredTitle; diff --git a/nextjs-ssr-manifest/checkout/components/sample.module.css b/nextjs-ssr-manifest/checkout/components/sample.module.css new file mode 100644 index 00000000000..79cf82f0e6e --- /dev/null +++ b/nextjs-ssr-manifest/checkout/components/sample.module.css @@ -0,0 +1,3 @@ +.thing { + color: red; +} diff --git a/nextjs-ssr-manifest/checkout/components/test.js b/nextjs-ssr-manifest/checkout/components/test.js new file mode 100644 index 00000000000..18c3d7e2a3d --- /dev/null +++ b/nextjs-ssr-manifest/checkout/components/test.js @@ -0,0 +1,4 @@ +export default function ClientOnlyComponent() { + console.log('it render'); + return Hello Client!; +} diff --git a/nextjs-ssr-manifest/checkout/next.config.js b/nextjs-ssr-manifest/checkout/next.config.js new file mode 100644 index 00000000000..8e97c101bc5 --- /dev/null +++ b/nextjs-ssr-manifest/checkout/next.config.js @@ -0,0 +1,46 @@ +const NextFederationPlugin = require('@module-federation/nextjs-mf'); +// this enables you to use import() and the webpack parser +// loading remotes on demand, not ideal for SSR +const remotes = isServer => { + const location = isServer ? 'ssr' : 'chunks'; + return { + home: `home@http://localhost:3001/_next/static/${location}/mf-manifest.json`, + shop: `shop@http://localhost:3002/_next/static/${location}/mf-manifest.json`, + }; +}; +module.exports = { + headers() { + return [ + { + source: '/_next/static/chunks/mf-manifest.json', + headers: [ + { + key: 'Access-Control-Allow-Origin', + value: '*', + }, + ], + } + ] + }, + webpack(config, options) { + config.plugins.push( + new NextFederationPlugin({ + name: 'checkout', + filename: 'static/chunks/remoteEntry.js', + dts: false, + exposes: { + './title': './components/exposedTitle.js', + './checkout': './pages/checkout.js', + './pages-map': './pages-map.js', + }, + remotes: remotes(options.isServer), + shared: {}, + extraOptions: { + exposePages: true, + }, + }), + ); + + return config; + }, +}; diff --git a/nextjs-ssr-manifest/checkout/package.json b/nextjs-ssr-manifest/checkout/package.json new file mode 100644 index 00000000000..103e482ece7 --- /dev/null +++ b/nextjs-ssr-manifest/checkout/package.json @@ -0,0 +1,17 @@ +{ + "name": "nextjs-ssr-manifest_checkout", + "version": "0.1.0", + "scripts": { + "dev": "rm -rf .next; NEXT_PRIVATE_LOCAL_WEBPACK=true next dev", + "build": "NEXT_PRIVATE_LOCAL_WEBPACK=true next build", + "start": "NEXT_PRIVATE_LOCAL_WEBPACK=true NODE_ENV=production next start" + }, + "dependencies": { + "@module-federation/nextjs-mf": "8.8.69", + "lodash": "4.17.21", + "next": "^14.2.35", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "webpack": "5.105.3" + } +} diff --git a/nextjs-ssr-manifest/checkout/pages-map.js b/nextjs-ssr-manifest/checkout/pages-map.js new file mode 100644 index 00000000000..f64893c49d1 --- /dev/null +++ b/nextjs-ssr-manifest/checkout/pages-map.js @@ -0,0 +1,3 @@ +export default { + '/checkout': './checkout', +}; diff --git a/nextjs-ssr-manifest/checkout/pages/_app.js b/nextjs-ssr-manifest/checkout/pages/_app.js new file mode 100644 index 00000000000..08abba9a02d --- /dev/null +++ b/nextjs-ssr-manifest/checkout/pages/_app.js @@ -0,0 +1,27 @@ +import { Suspense, lazy } from 'react'; +import App from 'next/app'; +import dynamic from 'next/dynamic'; +const Nav = lazy(() => { + console.log(import('home/nav')); + return import('home/nav'); +}); + +function MyApp({ Component, pageProps }) { + console.log('in app'); + return ( + <> + +