I'm working as a consultant and with my team, we refactored a huge back-office application written by another company.
This application was based on Next.js so with Server Side Rendering (SSR) architecture and this was another big mistake we noticed. As I mentioned before this application is for back-office users (not public available) so we didn't enjoy all the features of a SSR (SEO, etc. etc.) and we were struggling with slow page transitions, complex caching and server cost.
So for this particular use case a SPA is the right choice, fast interactions, caching capabilities and a better overall user experience.
From Next.js to React
We decided to migrate the project to React + Vite because Next.js framework is based on top of React ecosystem.
The most difficult thing was replace the router part.
We centralized all the navigation logic in one file and then we refactored this part with new React router methods.
All the refactor was an incremental activity, we moved files from the old code base to the new one, we added TypeScript for the reason we mentioned before and step by step, making sure to have an application that is always working, we completed the job.
Here are some results of this refactoring:
- it's cheaper because it's hosted a cloud Storage
- less exception in production (❤️ TypeScript)
- 35% faster than its predecessor (smaller bundle size)
- CI/CD pipeline is 50% faster 🚀
- the code base is easy to navigate and it's easier to implement new features
It was a long journey anyway benefits are massive.
You can follow me on Twitter, where I'm posting or retweeting interesting articles.
I hope this article inspires you, don't forget to give ❤️ if you like it. Bye 👋