Current section: Optimizations 29 exercises
Problem

Server Cache

Loading exercise

Transcript

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.