WTF is 💧Hydration?

Seb Gos (@tatakodzi) — Wed, 12 Feb 2025 14:21:38 +0000

Alright folks, let’s dive into one of the buzzwords of modern web development: 💧Hydration. No, it’s not about water bottles or staying healthy during coding marathons. In the JavaScript world, hydration is a key concept used in frameworks like Angular, React and many more. If you’ve never heard of it, no worries! Let’s break it down.

🏗 What is 💧Hydration?

Imagine you open a webpage. The page loads super fast, and everything looks perfect. But then, you try to click a button or interact with it—and nothing happens. Why? Because the page was just a "static" HTML snapshot.

Hydration is the process of activating that static HTML with JavaScript so it becomes interactive. Essentially, it’s JavaScript "rehydrating" the HTML, like pouring life back into it. It makes your website dynamic and functional, connecting all the buttons, forms, and animations.

It’s a commonly used phrase in a world of SSR (Server Side Rendered) apps.

Images taken from React Conf 2021.

💡 How 💧Hydration works in Frameworks?

Let's have a look at the most popular frameworks utilizing different hydration types.

Feature	Angular	React	SolidJS	Qwik	Vue
Hydration Type	Incremental	Full + Partial	Granular	No hydration	Full
Client-Side JavaScript	Moderate	Heavy	Minimal	Minimal	Heavy
Resumability	No	No	Partial	Yes	No

🔗 Links

Micro frontends in 1 minute

Seb Gos (@tatakodzi) — Wed, 28 Feb 2024 15:33:42 +0000

I'm a big fan of reading docs & manuals before I try things especially when they are a bit more complex (advanced). However I know how much joy and motivation it gives when you get first positive experience fast (e.g. running working example). That's why I've decided to look into micro learning where you might scratch the surface, experience if it's for you and get some insights what's next if you want more.

Today I want to give you short introduction to micro frontends architecture starting from project structure setup. Following the words above let's get working example first. I will use real-life example - we will create a banking app consist of micro frontends.

🕒 Time start

First of all let's create an empty (None) NX workspace:

npx create-nx-workspace@latest

and get into it:

cd bank-mfe

Then let's add some framework to the NX workspace:

nx add @nx/angular

Now let's create apps folder to store all our micro frontends:

mkdir apps

and get into it:

cd apps

It's time to create our micro frontends:

nx g @nx/angular:host shell --remotes=account,payment,investment,mortgage,pension

🕒 Stop the time!

You did it! Your project consist of micro frontends! Now you can start and see it in browser by:

nx serve shell --open

If you actively develop/change given micro frontend remember to serve it with devRemotes like:

nx serve shell --open devRemotes=account

👨‍💻 Link to code example

Code example: https://github.com/sebgos/bank-mfe

Video: https://www.youtube.com/watch?v=Vyi8pjuuky0

I have used:

Curious to get more insights on micro frontends? Let me know in the comments!

DEV Community: Seb Gos (@tatakodzi)