It just works: Hydrow’s instant publishing workflow with Contentful and Next.js
Hydrow recognizes that the continued success of their business depends on content. Their unique, immersive rowing experiences are enjoyed and appreciated by hundreds and thousands of fitter, happier customers. But delivering top-quality content in a way that’s fast and scalable is not as easy as it looks.
How do you transform your content management to enhance your business? There’s no single right answer. But that’s very much the beauty of composability and the Contentful Composable Content Platform. After choosing the right technologies and plugging them into your stack, we provide a flexible foundation to deliver your content with speed and precision wherever it’s needed.
In this guest post, the engineering team at Hydrow explain how they used Contentful to provide a richer experience for their editorial team — and, by extension, their customers. From defining foundational metrics to addressing operational complexity and optimizing product storytelling, this is a success story that spans Hydrow from stem to stern.
Envisioning a new DTC platform at Hydrow
When Hydrow re-built its direct-to-consumer (DTC) platform in 2022, we knew we wanted a solution that would enable content authors, designers, and marketers to create and publish content and site experiences seamlessly and quickly.
We also understood that we needed a system that would help maintain design and brand consistency, site speed, and SEO goals, but at the same time wouldn’t interfere with rapid ideation and iteration.
Our other goals were to accelerate the cycle of content creation from weeks to minutes and to keep our performance metrics on an upward trajectory.
To achieve all of the above, we identified the following key goals and principles to enable our continued success.
Deliver industry-leading speed as perceived by our site visitors and search engines.
Offer our creatives and content authors a robust component-based design system within which they could ideate and iterate quickly and painlessly.
Shift as many of the site-operations and marketing use cases as possible to be performed without development support or intervention.
Most importantly, allow all of these without any friction; the platform will automatically ensure speed and consistency are maintained without effort.
Making the right architectural decisions
We knew what we had to achieve, but we recognized we would need a scalable design system implemented using a modular and component-based content management platform.
We also saw the need to pre-render and cache as much of our site content as possible so that the “Lighthouse” score for page loading would remain high; this is a signal of quality for SEO.
With guidance from solution partner Wunderman Thompson Commerce and Technology (now known as VML), the choice became clear: we would meet our objectives by adopting Contentful and Next.js, hosted on Vercel.
Contentful allowed us to define a scalable and extensible content model that allowed non-technical users to compose and author pages and site experiences quickly and without development support. It also offered the ability to iterate on those components in non-production environments and support localization, publishing approval, and rich preview capabilities.
Vercel and Next.js offered us the ability to pre-render the vast majority of our pages and push them to edge caching, offering incredible front-end speed to end users. Incremental static regeneration (ISR) also gave us enough flexibility to keep statically generated pages up to date with dynamic data, and features like edge middleware granted us the ability to build extremely low-latency decision logic executed very close to users for use cases like experiment group assignment.
We also realized incredible backend scalability. Because user requests are served by either Vercel CDNs, edge middleware, or the cloud-native APIs of our commerce provider, we had no physical architecture failure points of our own, and so have been able to achieve incredible elastic scalability for high-volume events and traffic.
Another benefit of the Vercel hosting architecture is our ability to develop and test using declarative environments. So our business users can look at an in-progress feature simply by visiting a programmatically generated URL and see work-in-progress code updates or preview content changes.
Pairing all of this together means that our users are served pre-rendered content from edge delivery networks while authors publish and work with a "building block" library of rich, testable components independently and without development support and no need to understand the backend complexity.
Upon launching our new site, we observed an improvement in Web Vitals performance to the tune of 34% for desktop agents and 50% for mobile.
Refinements needed for the authoring pipeline
While the combination of Contentful, Vercel, and Next.js was a huge leap forward, as we assessed our authoring pipelines after our initial launch, we realized we were still a tad short of the utopian solution we'd envisioned.
The situation was that ISR was unable to automatically update pre-rendered pages when content changes were made, leaving us with a gap to be able to proof and see instant updates in production and complicating author workflows. Our authors’ work still didn’t update immediately on the web given the timer-driven Incremental Static Regeneration implementation.
This meant that when authors published changes, they would be picked up at the next increment but, crucially, authors couldn't see those changes instantly, depriving them of the ability to validate on the live site or proof production without waiting or enlisting developer support to manually regenerate a route.
We saw an opportunity to bridge this gap by integrating Contentful publish webhooks with the Vercel regeneration API and building an approach to identify the tree of routes requiring revalidation based on a given content entry update.
How we did it
Let’s go through the solution we came up with, step-by-step.
Step 1: Tackling interdependency
Our Contentful content model is interdependent and complex, and we needed to understand which page routes to regenerate when member entries in a given hierarchy are updated.
Some of our CMS components can have a depth of up to six parent references before reaching a page content model, e.g., Page A -> Component A -> Component B -> etc.
The Contentful API enables us to fetch related entries for a given component entry, however it doesn’t natively allow for determining the root page entry without traversing up the tree.
Step 2: Page route resolution
In response, we developed the following approach to ensure we can correctly and comprehensively update the correct list of cached page routes in Vercel:
We must fetch related entries, and traverse the chain of references until we find a page model type reference.
Once we find the page content model type, we pull the page slug information, and trigger a call to our Next.js revalidation API endpoint.
This means that if Component B is referenced by Component A, and Component A is referenced by Pages A and B, the call structure will look like this:
Step 3: Performance
Updates to entries found in global components such as a header or footer were found to be costly with the initial approach, since hundreds of pages required revalidation.
Sequential revalidation of each page is painfully inefficient and resource-intensive. Fortunately, Vercel provides a revalidatePath method that allows revalidation by path.
Using this feature, we can revalidate by path, such as ‘/blog/[slug]’ rather than individual requests for hundreds of pages.
To implement it, we extended our logic to distinguish whether a component is global, and collect page paths for revalidation using revalidatePath.
While developing certain component entries, there are cases when these entries aren’t yet added to any pages, resulting in needless and potentially deep-boundary traversal.
To resolve this, we extended the algorithm to stop recursion if there are no linked entries, or the reference is not a page content model type.
Step 4: Security
To prevent abuse, the revalidate endpoint needed some security measures to ensure the calls are authorized.
The endpoint handler requires a token security header when receiving inbound requests, such as Post-Update hooks from Contentful.
A Vercel environment variable is configured with a token value to be validated in each request.
This allows for flexibility and token rotation as needed, per environment tier.
Step 5: Preview functionality
We sought to preview changes in production before publishing them. Since our lower environments are constantly changing with new updates and test content, we had to come up with a way to separate out and view the changes that are saved but not published in the production environment of Contentful.
We solved this by setting up an environment in Vercel that uses a different Contentful API than the rest of the site. The preview API from Contentful will show changes that are saved, but not yet published, and the only difference between the preview and the production environment is an environment variable defined in Vercel that changes the API endpoint.
Successful outcomes with event-driven ISR
ISR is now event-driven and no longer timer-driven, resulting in more efficient execution with lower resource consumption. "It just works" — instant publishing, no matter the change in Contentful.
Invisible to authors, pages in production now update instantaneously, while maintaining the pre-rendering and caching benefits that drive speed and high core web vitals performance. Moreover, there is no longer any lag, allowing updates to be proofed immediately.
Rather than waiting for up to an hour or coordinating manual revalidations with the development team, authors can now rely on instant publishing of content updates to the site.
Needless to say, our editorial team is delighted with the new authoring experience. It’s been a transformative improvement around ease of use for authors, allowing them to focus on content, not technical details around revalidation. No wait time for ISR timeouts, or in seeking help from technical staff to see changes take effect.
Customers, meanwhile, are now guaranteed to always view the latest published content and data for any page with no delay, without Hydrow having to balance regeneration timer windows with resource limitations. Page assets remain pre-rendered and cached via CDN and so are delivered with the speed of static content resulting in a lightning-fast experience that is transparent to customers and end users.
Other efficiencies for the company include quick turnaround, predictable behavior, and reduced need for intervention from developers and related overhead. Developer cycles have been freed up to focus on value delivery.
And then there’s the flexibility of a straightforward approach that allows for extending revalidation logic for new page types that are added to the content model.
Wrapping up
In summary, the new preview functionality we created has allowed the members of the marketing and business teams to set up content updates and see how they will look in production without publishing the changes.
The teams are now able to set up the next round of content updates a couple days in advance, which in turn allows them to rapidly publish the changes when a promo or marketing campaign starts or ends. The business and marketing teams can also test how certain layouts will look on production without impacting the current production environment.
None of the above would have been possible without the versatility afforded to us by Contentful, Next.js, and Vercel. Extensibility is a boon to the extent that we were able to leverage APIs and webhooks with our own custom approach to create the ultimate content management workflow.
And with our content creators empowered to do their best work, Hydrow’s customers will continue to enjoy using our in-home rowing machines and live virtual workouts, now and in the future.
