Embracing Slow Networks: Improving User Experience

Kent C. Dodds
AuthorKent C. Dodds

Recently, Noah Falk on X shared a video that sparked a conversation about why your application needs client-side JavaScript:

Poor UX with HEY Calendar Popover

He demonstrated the Hey calendar app's performance on a slow network, revealing a significant delay when adding a new event—a delay caused by the app's reliance on server communication to display the contents of a popover.

The Reality of High Latency

The truth is, not everyone has the luxury of a fast internet connection. As developers, we can't control the network conditions our users will face. That's why it's crucial to consider how our applications perform under high latency (especially for productivity apps like a calendar). Some may dismiss these concerns, assuming that everyone has access to high-speed internet, but that's simply not the case. We must acknowledge that poor user experiences do occur and that they matter.

I've experienced this frustration firsthand with the Hey email service. Despite my initial interest, the sluggish response due to Hotwire's architecture led me to stop using it. This isn't to shame the technology or its supporters but to emphasize the importance of continuously striving to improve user experience.

React Server Components: A Game Changer?

The discussion naturally leads to React server components (RSCs) and whether they fall into the same trap as Hotwire, requiring server interaction for UI updates. While RSCs do involve server communication, they offer a unique advantage with the use client directive. This allows developers to seamlessly transition a component from server-driven to client-interactive without a complete overhaul.

With Hotwire, improving a feature like the Hey calendar popover would mean a significant shift to JavaScript, moving templates, and potentially re-architecting the feature. On the other hand, RSCs enable a more straightforward approach. By simply adding use client at the top of a file, you can introduce state and client-side reactivity without the need to juggle between Ruby and JavaScript code.

Embracing Innovation and Honesty in Technology

As we evaluate the technologies we use, it's essential to do so with honesty and a focus on enhancing user experience. Personal attacks have no place in this process. Instead, we should celebrate the advancements in our field and the different approaches to application development.

React Server Components are exciting because they allow developers to easily toggle between server and client-side rendering. This flexibility doesn't require a shift in your mental model or coding approach. It's this simplicity and adaptability that make RSCs a valuable tool in the web developer's arsenal.

Conclusion

In the end, it's all about creating the best possible experience for users, regardless of their internet speed. Innovations like React Server Components are pushing the boundaries of what's possible, enabling us to build applications that are both robust and responsive. As we continue to explore these technologies, let's keep the user at the forefront of our minds, ensuring that everyone can enjoy a seamless and engaging online experience.

Kent C. Dodds
Written by Kent C. Dodds

A world renowned speaker, teacher, open source contributor, created epicweb.dev, epicreact.dev, testingjavascript.com. instructs on egghead.io, frontend masters, google developer expert.

Join 40,000+ developers in the Epic Web community

Get the latest tutorials, articles, and announcements delivered to your inbox.

I respect your privacy. Unsubscribe at any time.