The "Render on Fetch" vs "Fetch on Render" Debate: A Deep Dive

Introduction

This video is a bit of a mess, and it's all because of a great blog post by Boba about collocation of data in React components. I ended up getting triggered pretty hard throughout the post, and the result was a diagram (which I put way too much time into) that I think can clarify a lot of misconceptions about React data fetching.

The Debate

Recently, the React community went through a bit of drama, and I'm not here to recite the whole saga. But, to summarize it briefly, there's been a debate about the best way to fetch data in React applications. The two approaches are "render on fetch" and "fetch on render." The former involves fetching data and then rendering the component, while the latter involves rendering the component and then fetching the data.

The Problem with Server-Side Waterfalls

One of the biggest issues with server-side waterfalls is that they require a significant amount of cognitive load. You need to identify the user, fetch the data, and then render the component. This can lead to a lot of complexity and make it harder to optimize performance.

The Benefits of Collocation

Collocation, on the other hand, allows you to fetch data and render the component at the same time. This approach has several benefits, including:

• Reduced cognitive load
• Improved performance
• Simplified data fetching

The Complexity of RSCs

While Render-as-You-Fetch (RSC) solves some of the problems with server-side waterfalls, it introduces its own set of complexities. RSCs require a hefty checklist of data hoisting, compiler routers, conventions, and more. This can be overwhelming for developers, especially those who are new to React.

The Importance of DX

At the end of the day, we're all here because we love React and want to keep pushing the developer experience (DX) forward. We need to find a way to solve the problems with React data fetching without making it feel like a different library.

This is the caption for the image 1

This is the caption for the image 2

This is the caption for the image 3

This is the caption for the image 4

Conclusion

In conclusion, the "render on fetch" vs "fetch on render" debate is a complex one, and there's no one-size-fits-all solution. We need to find a way to simplify data fetching in React without compromising the DX we love. Shout out to Boba for writing the article that inspired this video, and please watch and share so the diagram I spent too much time on is worth it!