Decoupled, Not Disconnected: State and Sync in Micro-Frontends
summary
Compares concrete architectures and tradeoffs: runtime client composition for SPA-like UX, server-side server-as-brain composition that stitches HTML/JSON and controls sessions, and CDN edge personalization that stays stateless and cache-friendly. Lists tools and patterns that actually get used: module federation to avoid duplicate React bundles, single-spa and web components for mounting, React Query / SWR for hydration, cookies/localStorage for simple sync, and backend-as-source-of-truth for consistency. Recounts which combos break routing, which keep auth safe, and which scale.
AI-written summary · about
chapters (17)
- 0:00Micro-frontends intro
- 1:55When to use micro-frontends
- 3:18Composition types
- 4:23Iframe challenges
- 6:10Server/edge composition
- 8:16Edge for low latency
- 11:23Client-side composition
- 13:30Single-spa mounting
- 16:21Module federation
- 18:09State sync with backend
- 20:17Runtime build sharing
- 24:57State via browser events
- 26:01Browser storage
- 27:24Shared API utility
- 28:31Hybrid edge-client
- 29:13State types to share
- 30:14Summary
related talks
30mMicro Frontends in React — a State of the Art Approach
24mScaling Frontend Development using Micro-frontends
47mCamel and Eye of a Needle: Integration Approaches for SPA-based Micro Frontends
55mTechnology agnostic microservices at SPA frontend
45mMicro Frontends in Action!
35mSSR with Micro-Frontends: How Composition Works with Modern Frameworks
52mShould We Decouple?
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development