Case Study

Hulu

Powering the Next Generation
of Entertainment

Hulu makes TV and movies easily accessible online — a feat which would be impossible without powerful engineering practices and tools. While the team at Hulu has been using Next.js since it's initial release, they recently made a push to spread the framework deeply throughout their organization. Next.js gave Hulu the confidence to migrate to a modern frontend environment, all while reducing their code surface area and shipping faster in the process.

Getting Started

Upgrading the Developer Experience

At the beginning of 2018, senior software engineer Zack Tanner and team began leading the migration of the Hulu Account app off of a legacy tech-stack, with the goal of unifying the developer organization and modernizing their code in an effort to prevent bugs and increase velocity.

Hulu had already been using Next.js for greenfield applications, so it was an obvious option when it came to choosing which framework to move to. This time, however, the team needed to migrate an existing production app—a challenge that comes with new difficulties of its own.

Process Improvements

Migration Made Easy

One of the most common challenges teams face when executing an incremental migration is handling the transition between the new and old systems. Fortunately, with Next.js there was never an issue with running both versions at once. With out-of-the-box support for prefetching new pages while jumping into the legacy app when needed, Zack and the team were able to easily migrate pages one-by-one. And since the intermediary hybrid-site was intelligently routed by Next.js, there was no need to maintain the overhead of explicitly tracking the migration's progress in the code itself.

In fact, throughout the migration, the ability of Next.js to make the extraction of common issues and patterns as easy as possible was a recurring theme. With each new version of Next.js, Zack and the team found they were constantly deleting internal code in favor of framework integrated tooling. Whenever the team needed to incorporate a new technology, Next.js had either first-class support or an endorsed example for them to follow.

“Productivity has skyrocketed. We’re able to focus on feature development and improving our product, while Next.js handles the more difficult tooling for us.”

Zack Tanner, Hulu Senior Software Engineer

Zack also found that Next.js helps developers avoid common pitfalls. By having a single abstraction for handling difficult UI tasks, Next.js prevents developers from introducing problems incidentally—for example from over-fetching deep in the component tree. If a developer needed to fetch new data, they knew exactly where to look. Nobody needed to learn any of the cumbersome underlying APIs and the team could trust Next.js to handle the hard parts.

Technical Improvements

Supercharged Applications

A critical requirement for Hulu was server-side rendering. With data coming from many sources and a fundamental need for SEO, server-side rendering was a must. With other frameworks, server-rendering pages with complex data dependencies is difficult and error prone, if not impossible. Next.js however made the process straightforward.

“[Server rendering] was as easy as moving data fetching from one spot to another. Next.js dealt with the underlying client hydration, while giving us a single abstraction to handle our data fetching logic.”

— Zack Tanner

Even when issues arose, Zack found that error tracing with server-rendered pages was far superior compared to any other solution he'd tried. By acting as a unified tool for managing both client and server-side rendering, Next.js makes it easy for developers to tap into the rich benefits of server-side rendering, while still working in familiar territory of writing client side code.

Finally, by using the CSS-in-JS solution that Next.js provides by default, Zack and team were able to implement optimized styles that were code-split automatically. This meant each page would load only the CSS it needed, keeping page-size small without compromising on functionality. The Hulu teams also extended these defaults using sanctioned next-plugins, enhancing their setup to support existing global Sass files with minimal overhead.

Organizational Improvements

One Framework for Everyone

Adopting Next.js early on in its history required writing lots of custom code to deal with the team's specific use cases. However, as the ecosystem evolved, they were able to chip away at old abstractions and let Next.js handle them directly.

As the migration progressed, a large amount of technical debt tapered, but another powerful benefit arose. The frontend teams at Hulu were unified around a single platform, reducing the time it would take developers to be productive in a new codebase. Zack confirms, "devs would come and go and switch teams, but everyone understands Next. Everyone is on the same page." The number of operational wins Hulu earned were on par with the technical ones.

The benefits of Next.js

A Happier, More Productive Org

One year into their journey, Zack credits Next.js for fewer bugs, greater productivity, and a happier engineering organization. As Next.js continues to improve, the Hulu team is excited to continually reap the rewards, passing them on to their users in the form of a more robust, and featureful platform.

Interested in working with modern technology on a world-class team? Check out the Hulu jobs page or their tech blog for more info on joining the Hulu team!