6d39919b99
* Add description to architectural-sympathy And fix some typos * Add description to codin-dirty * Add description to complexity-budget * Add description to does-hypermedia-scale * Add description to future and fix date * Add description to hateoas * Add description to how-did-rest-come-to-mean-... * Add description to htmx-sucks * Add description to hypermedia-apis-vs-data-apis * Add description to hypermedia-clients * Add description to hypermedia-driven-applications * Update hypermedia-friendly-scripting.md * Update hypermedia-on-whatever-youd-like.md * Update is-htmx-another-javascript-framework.md * Update locality-of-behaviour.md * Update lore.md * Update mvc.md * Update no-build-step.md * Update prefer-if-statements.md * Update rest-copypasta.md * Update right-click-view-source.md * Update spa-alternative.md * Update splitting-your-apis.md * Update template-fragments.md * Update rest-explained.md * Update two-approaches-to-decoupling.md * Update vendoring.md * Remove double-quote characters from descriptions * Add description block to demo.html * Update view-transitions.md * Update web-security-basics-with-htmx.md * Update webcomponents-work-great.md * Update when-to-use-hypermedia.md * Update why-gumroad-didnt-choose-htmx.md * Update why-tend-not-to-use-content-negotiation.md * Update you-cant.md * Fix description for htmx-sucks * Use `authors` built-in variable Instead of the custom `author` taxonomy * Descriptions and typos in interviews * That double word is actually correct
3.1 KiB
+++
title = "Next.js to htmx — A Real World Example"
description = """
In this case study, Pouria Ezzati examines how migrating a URL shortener from Next.js to htmx resulted in
significant improvements in codebase size, dependencies, and developer experience while challenging assumptions
about modern web frameworks."""
date = 2024-11-07
updated = 2024-11-07
authors = ["Pouria Ezzati"]
[taxonomies]
tag = ["posts"]
+++
Over 6 years ago, I created an open source URL shortener with Next.js and after years of working on it, I found Next.js to be much more of a burden than a help. Over the years, Next.js has changed, and so did my code so it can be compatible with those changes.
My Next.js codebase grew bigger, and its complexity increased by greater size. I had dozens of components and a list of dependencies to manage. I ended up maintaining the code constantly just to keep it alive. Sure, Next.js helped here and there, but at what cost?
I asked myself, what am I doing on my website that is so complex that needs all that JavaScript code to decide what to render and how to render on my webpage? Next.js was trying to render the webpage from the server side, so why won't I send the HTML directly myself?
So I decided to try a new route—some might say the good ol' route—and choose plain HTML and use the help of htmx for that.
Video
Watch me go full in details here:
The process
Replacing my components with the equivalent HTML elements powered by htmx wasn't exactly an easy task, but one that was worth the time. I had to view things from a different angle, and I sometimes felt strict in what user interactions I can implement, but what I created was reliable and fast.
All the build steps were gone; no more transpiling and compiling the code. What you see is what you get. Most of the dependencies became redundant and have been removed. All the main logic of the website was moved to the server side, holding one source for the truth.
In the Next.js version I had isolated components, global states, and all that JavaScript to handle the forms or update the content, and yet, everything was more intuitive with htmx. After trying it, sending and receiving HTML suddenly made sense.
Summary
- Dependencies are reduced by 87% (24 to 3!)
- I wrote less code by 17% (9500 LOC to 7900 LOC.) In reality the total LOC of the code base is reduced by more than 50%, since much less code is imported from the dependencies.
- Web build time was reduced by 100% (there's no build step anymore.)
- Size of the website reduced by more than 85% (~800KB to ~100KB!)
These numbers signify a great improvement, however, what is important for me at the end is the user and the developer experience, which to me htmx won at both.