Add microfrontends guide for Workers #27364
Draft
+342
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Document microfrontend architecture using router workers and service bindings, including routing logic, path rewriting, asset handling, preloading, and deployment workflows.
Contributor
|
This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:
|
Contributor
Brayden
reviewed
Dec 30, 2025
src/content/docs/workers/framework-guides/web-apps/microfrontends.mdx
Outdated
Show resolved
Hide resolved
Co-authored-by: Brayden Wilmoth <brayden.wilmoth@gmail.com>
Brayden
reviewed
Dec 31, 2025
Comment on lines
+172
to
+204
| ## Preloading | ||
|
|
||
| The router can generate a preload script that prefetches other microfrontends in the background, improving navigation performance between different parts of your application. | ||
|
|
||
| When you set `"preload": true` on a route, the router: | ||
|
|
||
| 1. Generates a `/__mf-preload.js` script | ||
| 2. Injects it into HTML responses | ||
| 3. Prefetches configured microfrontends after page load | ||
|
|
||
| Example preload script (automatically generated): | ||
|
|
||
| ```javascript | ||
| // Injected by router worker | ||
| const routes = ["/app-a", "/app-b"]; | ||
| const run = () => { | ||
| for (const p of routes) { | ||
| fetch(p, { | ||
| method: "GET", | ||
| credentials: "same-origin", | ||
| cache: "default", | ||
| }).catch(() => {}); | ||
| } | ||
| }; | ||
|
|
||
| if (document.readyState === "loading") { | ||
| document.addEventListener("DOMContentLoaded", run, { once: true }); | ||
| } else { | ||
| run(); | ||
| } | ||
| ``` | ||
|
|
||
| This allows browsers to fetch and [cache](/cache/) resources from other microfrontends before users navigate to them, resulting in faster transitions. |
There was a problem hiding this comment.
Suggested change
| ## Preloading | |
| The router can generate a preload script that prefetches other microfrontends in the background, improving navigation performance between different parts of your application. | |
| When you set `"preload": true` on a route, the router: | |
| 1. Generates a `/__mf-preload.js` script | |
| 2. Injects it into HTML responses | |
| 3. Prefetches configured microfrontends after page load | |
| Example preload script (automatically generated): | |
| ```javascript | |
| // Injected by router worker | |
| const routes = ["/app-a", "/app-b"]; | |
| const run = () => { | |
| for (const p of routes) { | |
| fetch(p, { | |
| method: "GET", | |
| credentials: "same-origin", | |
| cache: "default", | |
| }).catch(() => {}); | |
| } | |
| }; | |
| if (document.readyState === "loading") { | |
| document.addEventListener("DOMContentLoaded", run, { once: true }); | |
| } else { | |
| run(); | |
| } | |
| ``` | |
| This allows browsers to fetch and [cache](/cache/) resources from other microfrontends before users navigate to them, resulting in faster transitions. | |
| ## Route Preloading | |
| When `preload: true` is set on a static mount route, the router automatically preloads those routes to enable faster navigation. The router uses **browser-specific optimization** to provide the best performance for each browser: | |
| ### Chromium Browsers (Chrome, Edge, Opera, Brave) | |
| For Chromium-based browsers, the router uses the **Speculation Rules API** - a modern, browser-native prefetching mechanism: | |
| - Injects `<script type="speculationrules">` into the `<head>` element | |
| - Browser handles prefetching automatically with optimal priority management | |
| - Respects user preferences (battery saver, data saver modes) | |
| - Uses per-document in-memory cache for faster access | |
| - Not blocked by Cache-Control headers | |
| - More efficient than JavaScript-based fetching | |
| **Example injected speculation rules:** | |
| ```json | |
| { | |
| "prefetch": [ | |
| { | |
| "urls": ["/app1", "/app2", "/dashboard"] | |
| } | |
| ] | |
| } |
Other Browsers (Firefox, Safari)
For browsers that don't yet support the Speculation Rules API, the router falls back to a JavaScript-based preload script:
- Injects
<script src="/mount/__mf-preload.js" defer></script>into the<body>element - Script fetches preload routes after DOM loads
- Uses external script (CSP-friendly) instead of inline JavaScript
- Uses
GETrequests withcredentials: "same-origin"andcache: "default"
Browser Detection:
The router automatically detects the browser from the User-Agent header and injects the appropriate preload mechanism. No configuration needed!
Limitations:
- Only works for static mounts (no dynamic parameters)
- Only preloads routes that are not the current route
- Static mounts must have
preload: truein their route configuration
Example Configuration:
{
"routes": [
{ "binding": "APP1", "path": "/app1", "preload": true },
{ "binding": "APP2", "path": "/app2", "preload": true },
{ "binding": "APP3", "path": "/:tenant/dashboard" } // Cannot preload (dynamic parameter)
]
}When a user visits /app1, the router will automatically preload /app2 (but not /app1 since that's the current route).
There was a problem hiding this comment.
Well, that didn't take the full suggestion because of backticks I imagine...
|
Template added to our templates repo here: cloudflare/templates#877 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Document microfrontend architecture using router workers and service bindings, including routing logic, path rewriting, asset handling, preloading, and deployment workflows.