Have you ever dreamed of a world where Full-Stack JS apps can be made without Next.js? I hope so...
I have had this dream for a long time. I got annoyed with the Vercel lock-in, the "use" directives sprinkled all over the place, NextRequest // NextResponse, and some of the points mentioned in "Why I won't use Next.js".
I'm a Core Team member at PodCodar - a non-profit learning community for Digital Professionals. As a non-profit org, Vercel offered us an incentive plan to deploy our apps (WebApp, Store, Summer School, and other web apps) for free!
At first, we were amazed to have access to the Git CI/CD integration, DB/Storage Integration, and all the Vercel products for free! We went deep on it! Creating our Social App using the "Vercel Stack".
Everything was working great! Until I received an email with the sad news: "Vercel is sunsetting the Non-Profit incentive plan at the end of 2024". We have less than 10 developers and almost no money to afford to pay $20/month, approximately R$ 120/month in my local currency - Brazil mentioned! 🇧🇷
So we created a new ticket on our backlog: Technical Discovery: Research Vercel alternatives. At this point, I had no intention of migrating our app to Remix (or react-router v7).
The journey begins 🏃
I've used fly.io for a few personal projects. They have a tricky free tier, but the possibility of using Containers to deploy my application got my attention. Turns out, flyctl offers a great development and deployment experience!
So I thought - Let's containerize our Next.js app!
Fly.io, Let's go!
I created the Dockerfile for production in a few minutes, using a multi-step build to isolate dev and build-time dependencies from runtime. It works fine - on my machine...
When I attempted to deploy my Dockerfile to fly.io, I noticed that 256 MB of RAM wasn't enough, so I requested an extra 256 MB.
It turns out that the Next.js container takes 280 MB of RAM to serve little to no traffic! And the image size was > 600 MB!! 🤯
With an extra 250 MB of RAM, the app cost was $0.02/day - cheaper than Vercel but not free yet. I spent a few hours trying to reduce our runtime memory usage without success.
What are the alternatives? How can I run this app for free?
"Remix... ix... ix..." - said a voice in my head
Second trial - remix migration, let's go!
Several months ago, in my continued research for Next.js alternatives, I heard about Remix Framework. At first glance, I found it interesting because it offers an easier way to send type-safe data from server to client and follows Web Standards - which I'm a huge fan of.
But this was a long time ago. Is Remix looking good today? So I read the docs, I did a quick research, and... well, that's not what happened. Let's be honest, I just ran a few commands 😅.
It took me less than 1h to get it working with Fly.io. Then I could migrate our tailwind + react components, which took me a few hours. Then a couple of CI pipeline tweaks and Voila!
Check https://podcodar.fly.dev
It took me < 6 hours in total, and now our container is using 158 MB RAM on average and the new image size is approximately 178 MB! 🤩
Fly.io offers a great platform! I love it for small projects, but it is not a Cloud Provider. We'll need access to long-running workers, queues, databases, and more.
While I'd use fly for small apps, given the size and features of our web app, we'll need to continue our journey.
Third trial - Real cloud provider, let's go!
I have a few years of experience working with AWS and GCP. Both are great cloud providers, offer all the services we need, and much much much more. They are cool, but if you want a Vercel-like integration with your GitHub projects, you must implement it...
We'll also need to secure our app. I've used Cloudflare for that before... Cloudflare... Is Cloudflare a viable option?
Exploring Cloudflare features
When Cloudflare started, they focused mainly on building secure DNS and CDN services. They were successful at that, so they expanded. Have you heard about V8 isolates?
V8 isolates are like AWS Lambdas but for JS only. It reuses a JavaScript VM instance, which runs on the CDN nodes. As Cloudflare reuses the same VM instance to run multiple processes, they reduced the startup time for cold workers - workers not executed recently.
For more details, read this post: https://blog.cloudflare.com/cloud-computing-without-containers/
This caught my eye! They also had all the services required for our project, so let's try it!
In less than 2 hours I was able to make it work! Most of my time was spent migrating my Nameservers and waiting to propagate. Configuring wrangler and deploying the app took less than 30 minutes!
This is the Edge, baby! - https://podcodar.pages.dev
"This is the end, Beautiful friend, the end" 🎵
And I thought "We're done here!", right? I couldn't be more wrong: https://remix.run/docs/en/main/guides/migrating-react-router-app
I migrated my entire app to Remix, to discover that remix was merged into version 7 of my old friend react-router. Yeah, this sucks! So there we go, migrating everything again to yet another full-stack framework.
Luckily, it took me about one hour to migrate. I had to run:
bunx codemod remix/2/react-router/upgrade # I use bun, btw
The script took care of 80% of the migration. The remaining issues were related to Remix Cloudflare adapters that needed to be replaced with @react-router/cloudflare lib.
And that's it, we're back on rails!
Conclusion
After reviewing the technical discovery results, we decided to continue using Cloudflare!
I was impressed by how big Cloudflare is now! They have a generous free plan that is gonna fit us in the upcoming years, faster lambdas, and a great cli tool!
Besides all that, we also have a Vercel-like integration with Github! It generated preview URLs and even added an extra security layer to avoid unauthorized access to those preview URLs.
Also, the react-router framework is a great tool! We could have continued using Next.js once we moved to Cloudflare, but I'd rather not! It uses vite, has a great separation of concerns, it's easier to move between cloud providers, and doesn't lock you in a cloud provider!
I'll continue to use the react-router framework for my upcoming projects. Let's see how that goes!
See you later, bye! 👋
Top comments (0)