Over the past 15 months, Pareto's website has already undergone two iterations, built using Framer, a popular no-code tool. While Framer served us well initially, we recognized the need for a more scalable, robust solution to support our growing needs.
Pareto's senior software developer Ari Metsähalme and I began working on our third website iteration, migrating to a full-code stack comprising Next.js, React, TypeScript, Payload CMS, and MongoDB.
In this post I'll compare the no-code and code solutions, and share some technical insights and thoughts about the process.
Why We Chose Framer Initially
Framer’s no-code platform was an attractive choice for our initial website for several reasons:
- Designing and launching the website was fast. Framer’s UI allowed us to prototype and publish our first website in days, rather than weeks. This was important for a fresh startup.
- Managing blog content with the integrated CMS was easy.
- The website was fast, and search engine optimization was good out of the box.
- Framer took care of hosting, so publishing the website was straightforward.
The Limitations We Encountered with Framer
Framer fit our needs perfectly when we needed to get going fast and not consume too much resources on our website during the first months of Pareto's existence. Despite these advantages, we faced some challenges that prompted us to choose a different solution for our next website going forward.
1. The Myth of “Anybody Can Update”
One of our initial assumptions was that a no-code tool like Framer would enable anyone on our team to update the website easily. However, we found the opposite to be true:
- Without features like pull requests and code reviews, the risk of breaking existing functionality increases and this causes somewhat unnecessary caution. Frontend developers who prefer React seem to not like a WYSIWYG tool such as Framer. In the end I was the only one making any changes other than blog content.
- Adjusting a layout property in one component often had unintended consequences on parent or sibling components. Framer does this automatically to prevent conflicting layout rules, but it can be frustrating if you don't fully understand the inner workings of Framer.
- Non-developers and designers still needed a solid understanding of CSS flexbox and grid principles to create mobile responsive components and pages.
2. Scalability
Maintaining consistency and customizing became a challenge:
- Component Management: Without careful management, we ended up with minor discrepancies in fonts, paddings and colors across different pages. In Framer, if you didn't start making a section as a component, transforming it to a component later breaks the responsive variants, and you need to re-create them. So often I'd end up using copy paste instead.
- No-Code gets messy: The absence of a codebase made it difficult to enforce styling guidelines or refactor all components efficiently. Even though our website project was relatively simple, I could imagine it getting quickly out of hand with larger projects.
- Making custom components is manual work. If we weren't happy with the language selection toggle, making a custom one isn't as easy as you'd imagine. You'll end up tweaking inspector settings, dragging animation states, and re-creating components from scratch.
3. Component libraries and AI
Our ambitions outgrew what Framer could comfortably support:
- Component Libraries: Unlike in React, we couldn’t leverage robust component libraries like HeadlessUI or shadcn/ui.
- AI Integration: Generating new components with AI in Framer was not viable. While it offers an AI generator tool, it’s limited to rough layouts that require manual refinement.
We could also foresee the costs rising uncomfortably in Framer when adding more CMS collections, more website visitors and editors.
Transitioning to a Code Solution
Realizing the limitations of our current setup, we decided to build a long-term solution that would scale with our needs and leverage our team’s technical expertise.
Why Next.js and React?
- As a software consultancy, many of us are proficient in React and TypeScript.
- Next.js offers server-side rendering (SSR) and static site generation (SSG), providing great performance and SEO benefits by delivering rendered pages to crawlers.
- Access to a vast ecosystem of component libraries and tools.
- We can utilize AI tools such as Cursor to easily generate new components and pages
Payload CMS, MongoDB, Vercel
We needed a content management system that would allow non-developers to manage content without pull requests or making changes to the codebase. Website is first and foremost for marketing purposes so this should be as easy as possible.
Payload CMS is a headless CMS built with Node.js, offering flexibility and a solid API. Payload can be self-hosted and deployed together with the Next.js app, simplifying the tech stack. Payload works best with MongoDB for storing content so we picked a dedicated, managed MongoDB Atlas cloud instance.
Next.js apps work best in Vercel, so that's what we chose as the hosting platform. We also trialed Google Cloud Run, but the built times were significantly longer and you lose preview branches and other nice UX features. Load times in Cloud Run were also slightly longer.
Styling with Tailwind CSS
Tailwind CSS was our choice for styling due to its utility-first approach:
- Ensures a consistent design language across the website.
- Speeds up development by providing pre-defined classes.
- Enables self-contained components
- Works great with LLMs such as Claude Sonnet 3.5 and OpenAI's models
Challenges During Migration
We encountered issues with Payload CMS opening too many connections to MongoDB when deployed on Vercel. Vercel’s serverless functions were opening new database connections on each request. As a temporary solution deploying to Google Cloud helped mitigate the issue by providing a persistent server environment. Ugrading the Next and Payload packages helped solve the issue. We'll continue exploring connection pooling and Payload updates to optimize performance.
Testing and configuring CI/CD pipelines because of this required additional setup, which added complexity to the project.
The Benefits of Moving to Code
1. Enhanced Control and Customization
We can now leverage mature component libraries, reducing development time and improving reliability, and improving brand consistency. Adding more complex features like an AI chatbot or advanced search functionality is more straightforward.
2. Improved Collaboration and Change Management
Git allows for code reviews, branching, and rollback capabilities. Making changes to the website doesn't feel as brittle as in Framer.
3. Scalability and Cost Efficiency
Unlimited CMS Collections: We’re no longer constrained by pricing models that charge per collection. We can also add as many CMS editors as needed without incurring extra costs. There are costs associated with Vercel and MongoDB too, but the costs will stay limited even as we scale.
4. Leveraging AI
Tools like Cursor with OpenAI’s GPT-3.5 or GPT-4 models enable us to generate code snippets, refactor code, and even create entire pages.
Before and After
Old Framer Website
Our previous website was functional but limited in terms of scalability and customization.
New Next.js Website
Our new website is now more robust, scalable, and reflective of our capabilities as a software company.
Conclusion
While the migration from a no-code tool like Framer to a full-code solution with Next.js and React required more upfront effort, the long-term benefits are substantial. Our new stack can grow with us for years to come, supporting more features and users. Developers and non-developers can make changes easily. We’ve improved load times and overall user experience and we’re now equipped to implement advanced features without limitations.
As a software consultancy, it's important that our website not only showcases our services but also reflects our technical frontend expertise, and we're quite happy with the result. Our next step is to focus more on content to serve our clients, future employees and visitors even better.
If you're also interested in migrating your Framer, Webflow or Wordpress web solution to a modern Next.js app, we're happy to help!