In this episode, we look at how to fetch data directly inside your components—not just in your page routes. As an example, we add a count of all to-dos right in the navigation component. While this isn’t normally the best way to solve the problem (usually you'd go for state management), it’s a good way to see how fetching works at the component level.
We walk through setting up the fetch call using useFetch within the nav component, request the to-dos endpoint, and then just show the total using the .length property. The episode also touches on using the defer option, which is handy if you want to load the data a bit later, and demonstrates how this can affect what your users see.
By the end, you’ll see how easy it is to fetch data in any component using the same hooks and patterns from pages. This opens up lots of flexibility, letting you pull in data wherever you need it in your UI.