Micro-frontends with SSI/ESI/Ajax: multiple Astro fragments from multiple Astro servers on one page #713
Replies: 8 comments 22 replies
-
For some people, astro has already been the solution to what they call micro frontends. https://github.com/sasoria/astro-microfrontends-ssr It would help if you could share the specifics of your use case because it's a fairly new term and definitions vary. |
Beta Was this translation helpful? Give feedback.
-
For reference, here's an example with client-side composition. |
Beta Was this translation helpful? Give feedback.
-
@ematipico, I take it (based on the thumbs-down emoji) you don't like the idea of supporting server-side integration or Ajax integration of multiple Astro frontends? Why is that? |
Beta Was this translation helpful? Give feedback.
-
Genuinely I don't get these modern trends. First we create serverless and micro services, then, a few years later, we complain about the complexity of our systems and the skyrocketing costs of running it on scale. Now the same thing is happening to the frontend. |
Beta Was this translation helpful? Give feedback.
-
For me, the main reason to have micro-frontends despite the obvious additional overhead with regard to deployed JavaScript size and the additional infrastructure cost is team autonomy.
can be a huge time-saver. The teams can make their own technology decisions, code style and organization decisions, maintain their own pipelines and processes and perform independent releases. It allows teams to make important decisions independently, greatly improving time-to-market. I do not think we need a discussion whether this is a good idea. For some projects it is the right approach while for most projects it certainly isn't. It is a question of measuring how much the inter-team friction costs you. The obvious downside of such an approach is that frameworks and dependencies are duplicated, and while there are ways of resolving that duplication e.g. via module federation techniques, this again creates additional overhead and threatens to eat up the independence advantage we already gained. This is where Astro comes in as it has many features that both reduce deployed JavaScript as well as it allows features to be easily lazy-loaded on demand. So I would see it as a match made in heaven if this was possible, and I am quite sure that it would drive adoption for large business websites. However, there were some issues we identified, which is why this issue was brought forward to create some interest on your side. Maybe solving them is as simple as allowing some names to be configured so that astro applications do not clash? |
Beta Was this translation helpful? Give feedback.
-
I think this is an interesting proposal, but it might be useful to break it down to two pieces.
Maybe this would make it easier for the Astro maintainers to decide how to evaluate this proposal. This also brings up other questions: if (1) is possible, then why would you want to adopt (2)? Is it because ESI supports fallbacks and caching mechanisms are easy to implement? Would (2) require anything from Astro? |
Beta Was this translation helpful? Give feedback.
-
@ematipico @lilnasy, since you probably have a good overview of Astro: are you aware of more things that happen client-side in a way that two Astro instances could clash? We know of the...
You might also have a better feel for how problematic those things could be. The custom element might not be a big deal (unless a future Astro version changes it). The element would only be registered once and if the Astro fragments on the page would use the same Astro (major?) version, it probably just works. The astro:only event may be more interesting, since you might dispatch it twice (from both Astro pieces). If we had an idea, what things could cause issues, then we could also judge how simple it might be to work around the issues. If in the end it's just a small number of element/event names that could get something like a configurable suffix, this may be some "low-hanging fruit", and require little design effort. An interested party might even be able to contribute to make it happen. |
Beta Was this translation helpful? Give feedback.
-
Could you provide a (mono)repo with 2 or more astro apps and a meta one making SSIs or at least a schematic of it and show/describe the pain points in comments? |
Beta Was this translation helpful? Give feedback.
-
Body
Summary
A classic micro-frontend approach for server-rendered pages uses Server-Side Includes (SSI), Edge-Side Includes (ESI), and/or Ajax to compose a page from multiple different servers. Astro does not support this well: multiple instances could clash on the client side because of global state/elements/events. I propose to find a way to avoid these clashes – maybe some configurable names for global things would do the trick.
Background & Motivation
Micro-frontends are gaining traction.
The latest InfoQ trend report shows them in the early adopters column (see https://www.infoq.com/articles/architecture-trends-2023/ ) and there are many well-known large companies that have adopted micro-frontends.
Micro-frontends are a great fit for current architecture trends in general.
When organizing teams "for fast flow" – aligned with value streams (see Team Topologies) and using Domain-Driven Design, the idea is that teams can work autonomously in their domains. Ideally, a team could make changes to the backend and frontend within their domain without hand-offs to other teams.
In the backend, we have long moved towards independent services.
It would be unusual to see 20 teams working on one (backend) monolith.
It would be inconsistent if we stick with monolithic frontends.
Composing multiple fragments from different applications on a single page is relatively simple with MPA-style frontends. Where SPAs require complex solutions with application shells like single-spa or piral, some techniques for the "MPA" world are simple, battle-tested and widely available: classic approaches like Server-Side Includes or Edge-Side Includes.
The problem: Astro is not designed to support two or more Astro fragments on one page. It uses global pieces like the astro-island custom element and global events. The dev and preview modes rely on fix paths like
/src
that cannot be changed.While Astro is not designed for that use case, there is some interest in it.
Some comments on #266 refer to micro-frontends.
Goals
Note: the dev/preview mode has lower priority; with micro-frontends it is a good pattern to test fragments in isolation.
Questions
Might there be a relatively lightweight way to "retro-fit" Astro with that capability?
What aspects of Astro use global state/elements/events? Might it be possible to introduce hashes in the names of these state/elements/events so they don't interfere with another instance?
Relates to
Beta Was this translation helpful? Give feedback.
All reactions