#ASKTHEINDUSTRY 34: Can Preact be the lightweight solution to client-side hydration we’ve always needed?
So, I’m developing this site and having a products list rendered server side (as you do). On the client, I need JavaScript to take over and manage this list: adding and removing nodes according to some filter (by category, by name, and so on).
I start hacking my solution together in VanillaJS, and am pretty satisfied with the result. Then a bug arises. And it’s madness, spaghetti code always bites you, and that’s what has just happened to me.
So I go on and refactor, cleaning things up, splitting code into modules, separating views from logic. The bug disappears, but a funny feeling has taken its place: I wrote a lot of code, 90% of which is untested and possibly fragile app architecture, the same that I could have just dropped in from some npm package. It would have been safer and more stable.
But! It would have been way too heavy in size! Well, but is it really the case?
Thanks to the work of the awesome Jason Miller and its Preact we now have all the power of a proper, tested and reliable view library in just 4KB of code. The way I see it, dropping in a “framework” for even small tasks it has now become really an option.
I decided to reach out to Jason to see if Preact might fit this use case:
in a few minutes he came back with an example and an explanation (thank you Jason!)
As it turns out, Preact lists among the differences with React the following:
render() accepts a third argument, which is the root node to replace
Which is pretty handy, as you can easily add Preact on a project without having to reconsider the way you have done SSR so far. Preact will hydrate your raw HTML and take over from there.
In the end, I am sticking with my own solution (for now), mainly because I don’t really like the idea of authoring my components twice (once with regular HTML, and once for Preact). However, I may change my mind soon, if things start to become hard to tweak and maintain, as they are now.
If you’ve found this post useful at all, press the ❤ button! I read each and every comment, so be sure to contribute to the conversation with your thoughts!
