Upgrading Our Frontend: Navigating the migration from Nuxt 2 to Nuxt 3 using Nuxt Bridge

Although the migration didn’t go as smoothly as we hoped, it was a valuable learning experience. We faced several problems, but we also made important improvements along the way. This journey taught us a lot about our system's strengths and weaknesses, helping us become more resilient and adaptable. We found areas that needed better optimisation and improved our processes. Despite the setbacks, we gained deeper insights into our infrastructure. Below we explain in details what happened, the issues we faced, and how we managed to move forward despite the obstacles.

But let's start from the beginning. Nuxt 2 was becoming increasingly slow and was causing issues during local development. Our development team often found themselves frustrated with the sluggish performance, which was hindering productivity and delaying project timelines.

Additionally, to effectively conduct server-side A/B testing, migrating to Nuxt 3 was almost mandatory. The newer version offered better tools and functionalities for running these tests, which are crucial for optimising our user experience and making data-driven decisions.

Another significant factor was security. With the end of official support for Nuxt 2 scheduled for December 2023, we needed to transition to Nuxt 3 to ensure our platform remained secure and up-to-date with the latest security patches and features. Sticking with Nuxt 2 beyond this point would expose us to potential vulnerabilities, which could compromise our system's integrity and our users data.

Moreover, Nuxt 3 promised enhanced performance, better scalability, and more modern development practices. It was designed to take advantage of the latest improvements in web technology, making it a more future-proof choice for our projects. The improved architecture of Nuxt 3 also meant that we could build more robust and maintainable applications, providing a better overall experience for both our developers and users.

Given all these reasons, migrating to Nuxt 3 was clearly the best path forward for us.

Non-technical challenges faced

Apart from the technical stuff, we faced some other challenges during our migration:

• First off, not everyone on the team knew much about Nuxt 3 and the new Composition API. This made it harder to use these new tools well and slowed us down.
• We also didn’t have enough people working on the project. Only two engineers were assigned to the project at half capacity, meaning, only 50% of their time would be spent on the topic. So, we were a bit short-handed.
• On top of that, we were also moving to our new system while still using our legacy one. Doing both at the same time was tough and stretched us thin.
• Lastly, our current codebase wasn’t very stable since the number of new features planned to be implemented to create stability in our product. Fixing it up took extra time and effort before we could even think about moving forward.

All these non-technical challenges made our migration journey a bit bumpy, but we managed to work through them.

Technical Challenges Faced

During our migration process, we encountered several technical difficulties:

1. Issues with Nuxt Update in the Edge: The latest version of Nuxt, known as the edge version, turned out to be unstable. It frequently caused disruptions and didn’t integrate smoothly with our system. Instead of resolving existing problems, each update often introduced new issues.
2. Hydration Problems: Hydration, the process of merging server-rendered pages with the Vue.js application on the client side, posed challenges. We faced bugs and inconsistencies, impacting the reliability of our application.
3. Memory Leaks: Over time, our application began consuming excessive memory, resulting in slow performance and occasional crashes. This issue demanded urgent resolution to maintain system stability.
4. Rollout Issues: Deploying the new system posed risks due to its instability. Each rollout had the potential to disrupt the system, necessitating a return to the previous version to avoid downtime.
5. System Instability: Our new system suffered from instability, leading to frequent downtimes and unexpected behaviours that negatively affected user experience.
6. Lack of Real-Time Monitoring: We lacked adequate tools for real-time monitoring of our system. This deficiency made it challenging to promptly identify and address issues as they arose.
7. Unstable Development and Staging Environment: The instability extended to our demo environment, impacting our ability to showcase the capabilities of our system reliably to potential clients.
8. Nuxt Bridge and Nuxt 3 Functionality Issues: Both Nuxt Bridge and Nuxt 3 experienced functionality issues and lacked stability. Nuxt 3, intended to address these issues, remained unstable and incomplete until the end of 2023.

Turning Problems into Improvements

Even though we faced many challenges, the process helped us identify and make several key improvements:

• Better architecture with cron jobs: Replacing the old Node.js generator service with Kubernetes cron jobs has made our build and deployment processes more efficient and easier to manage. Stay tuned, there will be a dedicated article for this but for now, make sure to check our other article that describes the architecture of our system.

• Update and Remove Unused Modules: Updating our module means we now have the latest security patches, performance enhancements, and features, which will help us make any future implementation or migration attempt much easier.
• Enhanced Monitoring: We have implemented better monitoring tools that give us real-time insights into system performance, allowing us to respond to issues more quickly.
• Stable Environments: By addressing stability issues, we have made our demo environment more reliable, better showcasing our platform to potential clients.
• Better Planning for Future Migrations: The lessons we learned from this migration will help us plan better for future migrations, allowing us to anticipate and address potential challenges more effectively.

Conclusion

Even though our Nuxt Bridge migration did not go the way we wanted, it taught us a lot and made our system better. It showed us how important it is to stick to our plans and give enough resources to the migration process. That's why we're even more committed to our current migration to Nuxt 3. We're making sure to focus on it and assign more people to get it done right. As we get ready for future migrations and updates, the things we learned from this experience will help us make them more successful.