React Server Components and Ahrefs' Billion-Dollar Infrastructure Savings

Hello,

On our way to frictionless development, we’re often brought back to reality by the budget we can spend. So reading that Ahrefs saved billions of dollars by using their servers instead of popular AWS services highlights the potential for massive savings and improved performance, prompting us to reconsider our own infrastructure decisions.

Of course, besides this one we have some more news in our newsletter today, so - enjoy!

In The Queue Today

• React Server Components, Motivating Teams, and the Perils of Soft Delete
• React Query Explained, Strict Mode Race Conditions, and Why Patching Globals is Harmful
• Vercel AI SDK 3.1, Lambda Cold Start Myths, and Ahrefs' Billion-Dollar Infrastructure Savings

Reduce Friction

Managing High Performers

Even the best performers need structure and guidance from their managers. Weak managers let high-performing reports do whatever they want, but a strong manager acts as a coach and career-planner for their high-performing team members.

The Forensics of React Server Components (RSCs)

This article explores the transition from client-side rendering (CSR) to server-side rendering (SSR) and their limitations, leading to the introduction of React Server Components (RSCs) as a hybrid solution. RSCs allow developers to selectively choose the rendering strategy for individual components, optimizing performance and user experience.

Avoiding the Soft Delete Anti-Pattern

Soft deletion, a way of treating old data as if it has been deleted, can lead to problems with querying the data and serious consequences like charging users to restore data. There are better ways of ensuring access to old data, including hard delete.

How to Motivate Your Team to Meet Deadlines

This article offers practical strategies for setting expectations, leading by example, encouraging teamwork, celebrating milestones, offering support, leveraging feedback, and embracing cultural diversity to motivate teams to meet deadlines. It includes good ideas and a touch of humor.

Don't Get Hit With the Pendulum: DevOps Shifted Too Far Left

The DevOps movement has led to a significant shift-left in large organizations, often resulting in application delivery teams being overburdened with infrastructure management responsibilities. This approach, while seemingly empowering, often leads to technical debt and burnout. The article proposes platform engineering, with its focus on providing golden-path workflows and tooling, as a more sustainable solution for organizations seeking to implement DevOps effectively.

Deepen Your Expertise

Preventing and Fixing Bad Data in Event Streams — Part 1

Bad data, which doesn't conform to what is expected, can cause serious issues and outages for downstream data users. This article looks at bad data in relation to event streams, exploring how it ends up in an event stream and what can be done about it.

Why Patching Globals Is Harmful

React, Next.js, and Bun have introduced features built on top of patched globals. This article explains why patching globals is never a good choice, despite its reasoning and appeal.

React Strict Mode and Race Condition

Strict Mode's double invocation of effects can lead to unintended state updates if the cleanup function aborts a previous operation. This article provides a straightforward solution by introducing a flag to prevent state updates from aborted operations.

Locality of Behavior in React Components

This article makes a good argument for structuring React components as self-contained units, encapsulating markup, styles, and event handling within each component. Locality enhances maintainability by minimizing context-switching and promoting modular code. The author also underscores the importance of descriptive naming conventions for event handlers, aligning them with domain logic rather than UI elements.

Headless UI v2.0 for React - Tailwind CSS

Headless UI v2.0 for React has just been released, packed with improvements for a better developer experience. The update includes built-in anchor positioning, a new checkbox component, HTML form components, enhanced state detection, and list virtualization for comboboxes. Additionally, the documentation has been revamped, and a new website has been launched for easier navigation.

Why React Query?

React Query is a library that is used in one out of every six React applications. Hooks were created to solve the problem of how to compose and reuse non-visual logic. The release of hooks ushered in a new era of React – the "How the heck do we fetch data?" era.

Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers

A refresher on the basics, like this one, is nice, every so often. :)

Implementing Stateful Logic in React With Hooks

React Hooks are functions that let you use state and other React features without writing a class. The useState hook allows functional components to manage state. UseEffect adds the ability to perform side effects in functional components. UseContext provides a way to pass data through the component tree without having to pass props down manually at every level.

Increase Scalability

Vercel AI SDK 3.1: ModelFusion Joins the Team

Vercel has released version 3.1 of their AI SDK, which brings ModelFusion into the fold. This release aims to provide a comprehensive TypeScript framework for developing AI applications.

Unraveling the Enigma: Debunking Myths Surrounding Lambda Cold Starts

This article provides a nice debunking of common myths surrounding AWS Lambda cold starts. Cold starts don't happen with every invocation, and their impact varies depending on application type and configuration. It explores strategies for mitigating cold starts, including AWS SnapStart and Provisioned Concurrency, and the importance of observability for understanding and optimizing cold start behavior.

Performant, Secure, and Versatile Containers

By harnessing the performance benefits of Wasm and the containerization capabilities of Docker, developers can streamline scalability, leverage consistent development environments, and enhance security through layered isolation.

How Ahrefs Gets a Billion Dollar-Worth Infrastructure With a 90% Discount

Ahrefs has spent $122 million to support its on-premise infrastructure since 2017. This represents a major cost centre for the company. They compared this with the costs of AWS equivalents for the servers and storage; neither AWS option results in less than a $1 billion price tag, while Ahrefs managed to keep its costs 10 times lower.

Just Cool

Finn Mclean built his own coffee roaster from scratch with no guidance. Coffee roasters are fundamentally basic machines. There’s a big drum, a motor that turns it, a heat source that heats it, some form of airflow, and a tray to cool the roasted coffee.

If you would like to get this newsletter straight to your inbox, head over to frictionlesspost.com and sign up there.