AI BriefingRevamping the Common Header (GNB) in an MFE Environment
Key point
Inflearn revamped its Module Federation-based header, balancing UX and DX with snapshots and transform-based motion.
Details
Inflearn's header (GNB) was revamped to more clearly surface core services such as courses, challenges, mentoring, clips, and community.
Initially it started from the Antman monolith and was separated into a React-based MFE structure, but the problem remained that every time the common header was modified, both the app shell and each domain package had to be deployed. To solve this, they compared server-side composition, CI/CD dispatch automation, and runtime loading (Module Federation), and chose runtime loading for independent deployment and maintainability.
However, this approach created another layer of complexity.
- They had to dual-maintain a JS header for Antman and a React header for the app shell.
- Attaching the header directly to the Antman layout required handling style conflicts and Layout Shift.
- To address this, they created a Vite-based entry dedicated to Antman, used
emotionto reduce class conflicts, and usedMutationObserverand placeholders to prevent layout changes before and after loading.
The most noticeable problem was the skeleton flicker that repeatedly appeared on every SSR page transition. To solve this, they introduced a snapshot approach: storing the previous header state in a cookie, then reading it on the server with getState and injecting it via data-* attributes and CSS variables on the <html> element. Since the component tree was left unchanged and only CSS controlled visibility and labels, hydration errors were avoided, and first-time visitors were shown only the main icons.
The search bar area was handled the same way, passing along path information so that height was secured from the skeleton stage. The scroll motion was then changed from height-based changes, which caused reflow, to transform: translateY(), reducing CPU load and allowing smooth movement during the GPU Composite stage.
Ultimately, this revamp was a pragmatic compromise that improved UX without fully switching to SSR, while consolidating the header into a single app shell to reduce deployment burden. Remaining tasks include improving the API loading speed of the app shell and migrating all of Antman's legacy pages to React to remove the adapter layer.
This summary was generated automatically by AI. Check the original for the author's claims and context. Copyright belongs to the original author.
Our guide explains how the AI works. Report summary errors, attribution issues, or removal requests via Contact.
Related
Building Aviation Frontend Authentication: Integrating Token Ingestion Paths for Web and App WebViews and httpOnly Cookie Handling Strategy
Designing Cache and Fallback Strategies for S3 + CloudFront-Based SPA Deployment
Google Includes Premium Colab Benefits in AI Subscription Tiers
Standardization of Boilerplate Templates Integrating AI Coding Guidelines and SkillsProgramming Language 'Bend' Released to Prove AI Errors
AMD Publishes Paper on Numerical Behavior Modeling of GPU Matrix Cores