Server Cache

[00:00] So these requests that we're making are all hitting this mini server that we've got here in our loader. So when we search ships, this is where it goes. And we perform the search ships function on our back end, and we get our result. And then we send back a JSON stringified version of that.

[00:18] And so what we're going to do is add a cache control header of 300, max age 300, that will store things in our browser for five minutes. And then we'll do the same thing for the get ship API.

[00:32] And so now I'm going to do a search for star. And then I'm going to refresh and check this out. Here, let's clear out the network, do another search for star. And, man, that was fast because it's all coming from the disk cache because we told the browser, hey, could you hang on to this for like five minutes?

[00:51] Our data is not likely to change that often or whatever. And so this is pretty basic. There's not really a great way to invalidate or anything with just the cache control header. There are mechanisms, but that's a whole other topic in itself.

[01:06] But I just wanted to have you watch this or experience this, do this, so that you could appreciate that a lot of the performance optimizations that we can make are actually back end optimizations that you can make. And not everything needs to be cached in the client.

[01:23] There's kind of give and take on both ends of that. And perhaps even if the requests that you're making are taking a long time, maybe the server just needs to optimize its own stuff so it doesn't take so long. So, yeah, there's a lot around optimization here,

[01:39] and this is one of the places where it can be really useful to optimize.

[00:00] A lot of performance problems can actually be solved by fixing the back-end. Back-end is the source of many, many performance problems, which is why full-stack development is such an important thing, because it allows you the freedom and flexibility to go back and forth between the front-end and back-end and do all the optimizations that you want.

[00:17] Now, we do have a mini back-end supporting all of this, and we're going to do a little mini back-end work in here. So here's what we're doing. If I type in star right here, you'll notice that each one of those is going to trigger a request, and that's fine. You could debounce it if you really cared, but the point is that this is taking a bit of time to resolve.

[00:37] And now if I do this again, then we're actually not even making the request because we have all these promises in our cache, and so it's been cached on the client. The problem is, if I do a refresh of the page, and then I try to do this again, you'll notice we're making all those requests again,

[00:57] and they are taking all this time. It would be nice if we could tell the browser, hey, if you're going to be on the page for a while, like 10 seconds, maybe 300 seconds, who knows how long, but if you're going to be around for a while, then why don't you just hang on to that data so you don't have to ask me for it again?

[01:15] So that's what we're going to do in the API server file. You're going to update that to add a cache control header on the response. That way, when people search for the same thing within like five minutes or something, then they should be able to just get that same thing, and it'd be a lot faster. The browser will handle all that caching for us, which would be cool.

[01:35] So even on a refresh, you should still be able to get the cached versions, and it'll say cached in here. So good luck. We'll see you when you're done.

Suspense is key to managing async operations declaratively in React. 

It allows you to handle loading states, errors, and other async dependencies more smoothly by rendering a fallback while a promise is pending. 

In this workshop, you'll learn how to:

- Manage loading and errors with Suspense
- Cache promises and use the `useTransition` hook
- Update UI optimistically with `useOptimistic`
- Load images asynchronously with suspense 
- Keep UI responsive with `useDeferredValue`
- Optimize and avoid network waterfalls

Once you're through this workshop you'll have a solid handle on Suspense, which will really improve the UX of your apps and open doors to more advanced patterns in later workshops. 

## Data Fetching

No matter how fast your server is, you need to think about what the user's looking at while they wait. You also need to think about what happens if the request fails.

In this section you'll learn how to manage both of these declaratively in components using `Suspense` and `ErrorBoundary`.

## Dynamic Promises


Here you'll learn how to cache your promises in order to avoid unnecessary re-fetching. 

You'll also learn about transitions and how to make the transition from loading to resolved state smoother using the useTransition hook.


## Optimistic UI

The idea of "Optimistic UI" is based on the belief that most of the time the things your users do will be successful.

In this section you'll discover the useOptimistic hook, which is like useState that actually changes the UI even while it's suspended. 

## Suspense img

Anything async can be suspended, including images! 

This technique involves loading images with promises and using the browser’s native caching system. 

By combining async image loading with Suspense boundaries, you can control rendering fallbacks and ensure images are fully loaded before displaying updated content, avoiding stale UI states

## Responsive

You can run into some problems when using useTransition. For example, if the user is typing in a search box which you're controlling with state, you want to keep the `<input />`'s value up-to-date with what they're typing, not with the previous state while React is waiting for the transition to complete.

So in this section you'll learn how to use the useDeferredValue hook to  display some pending state while also allowing us to display the state that triggered a component to suspend.

## Optimizations

This section is about how to go chasing waterfalls.

Due to the design of Suspense, you can easily create network waterfalls by mistake. 

So what you're really be learning is how to deal with this both on the frontend and the backend. On the front you'll figure out how to trigger requests before use is called. And on the back you'll set cache headers on your responses to tell the client how to cache properly.

Learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

React Suspense

React Suspense

Transcript

Server Cache

Transcript