Modern frameworks like Angular, React, and Next.js often combine server rendering with client-side interactivity. One important concept in this process is hydration.
Hydration is the step where the JavaScript framework reconnects to the HTML that was already rendered on the server and makes it interactive.
The idea sounds simple.
- Server renders HTML.
- Browser displays the page immediately.
- JavaScript loads.
- The framework attaches event listeners and state to the existing DOM.
Once hydration finishes, the page becomes a fully interactive application.
This approach improves performance because users can see content immediately instead of waiting for JavaScript to build the page from scratch.
However, things become much more complicated when microfrontends are involved.
Recently I built a microfrontend architecture and enabled hydration. The result was unexpected. The applications appeared visually, but they were not responsive to user interactions. Buttons did not work, and parts of the interface felt frozen.
Eventually I had to disable hydration to make the system usable again.
After investigating, I realized several problems were happening at once.
First, hydration delays interaction. The page is visible, but JavaScript has not yet attached event listeners. In a microfrontend setup where multiple bundles must load, this delay becomes noticeable.
Second, hydration mismatches can occur. Hydration expects the server-rendered HTML to be exactly the same as what the client framework would render. In microfrontends, remote applications can modify the DOM or load asynchronously, causing mismatches that force the framework to discard the server HTML and re-render everything.
Third, multiple runtimes can conflict. In module federation setups, different microfrontends may load their own framework instances. During hydration, more than one runtime may try to control the same DOM region, which leads to unstable behavior.
The result is a page that looks ready but behaves unpredictably.
Because of these issues, many production microfrontend architectures take a simpler approach:
- The host shell may use SSR and hydration.
- Remote microfrontends run purely on client-side rendering.
This keeps the initial page fast while avoiding complex hydration conflicts.
Hydration is a powerful technique, but in distributed frontend architectures it must be used carefully. Sometimes the simplest solution is to limit hydration to the shell application and let microfrontends load normally on the client.
Modern frontend architecture is not just about using advanced techniques. It is about knowing when they actually make systems simpler and more reliable.