Treedwellers

Overview

Treedwellers originally had a single-page React application that was functional but becoming increasingly difficult to maintain, with outdated packages impacting performance and limited SEO capabilities holding back organic growth.

We migrated the application to Next.js, refactoring the codebase to modernise the stack, improve performance, and optimise for conversions. The focus was on creating a scalable platform that would improve booking conversions whilst reducing technical debt.

The Challenge

The existing React SPA was suffering from several critical issues. Outdated code and package vulnerabilities made maintenance difficult and time-consuming. Performance was degrading as dependencies aged, and the lack of server-side rendering meant SEO opportunities were being missed.

From a business perspective, these technical limitations were directly impacting revenue. Poor performance led to drop-offs in the booking funnel, and limited SEO visibility meant fewer potential customers were discovering the site organically. The client needed a platform that could scale with their business without constant developer intervention.

The technical challenge was migrating to a new framework whilst maintaining existing functionality, preserving brand identity, and adding a new custom booking search feature.

The Approach

We began with research into React frameworks that would provide immediate performance and SEO benefits without requiring a complete rewrite. Next.js emerged as the clear choice, battle-tested, excellent performance, strong SEO capabilities, and the ability to use both server and client components.

For data fetching, we implemented GraphQL with API routes to query Contentful, allowing us to fetch only the exact data needed for each page. This approach significantly reduced payload sizes and improved page load times.

The development process prioritised the booking functionality first—we built and thoroughly tested the new custom search component before migrating the rest of the site. This component allows users to search availability by date and party size, functionality not provided by their booking provider. We then migrated remaining pages, optimising and modernising as we went.

Throughout the project, we collaborated closely with the client on UX decisions for the search results and booking flow. We also expanded their brand guidelines, adding modern animations and interactions whilst staying true to their established visual identity.

The Solution

The new site is built on Next.js with a headless CMS architecture, allowing the Treedwellers team to update content independently. The custom search component integrates with their booking provider's API, giving visitors real-time availability without leaving the site.

We leveraged Next.js server and client components, server components for content-heavy pages to improve initial load times, and client components for interactive elements like the search and booking widgets. This hybrid approach delivers fast page loads whilst maintaining rich interactivity.

The GraphQL layer provides a clean abstraction over Contentful, making it easy to add new content types and modify data structures as the business evolves. All data fetching happens server-side where possible, reducing JavaScript bundle sizes sent to the browser.

During the migration, we also improved analytics and conversion tracking, implementing enhanced Google Analytics 4 events and connecting Google Ads conversion tracking to provide better visibility into the booking funnel.